.col10main .accordion {
    background: #0d111d;
    border: 1px solid #0d111d;
    border-radius: 16px;
    padding: 0px;
    box-shadow: 0 10px 30px rgba(20, 35, 70, .06);
}
.col10main .accordion-group > .alert-success {
    position: relative;
    padding: 16px 18px 16px 46px;
    color: #8ab88a;
    background: linear-gradient(135deg, #152218 0%, #1a2e1e 100%);
    border: 1px solid #2a442a;
    border-radius: 12px;
    line-height: 1.7;
}
.col10main .accordion-group > .alert-success::before {
    content: 'i';
    position: absolute;
    left: 16px;
    top: 17px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
.col10main .panel {
    width: 100%;
    padding: 20px;
    border-color: #23283c;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(20, 35, 70, .05);
}
.col10main .panel form {
    width: 100%;
}
.col10main .panel > h4,
.col10main .accordion-group > h4 {
    margin: 26px 0 12px;
    padding: 12px 16px;
    color: #d0d8e8;
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #1e2235 0%, #1a1e30 100%);
    border-left: 4px solid #667eea;
    border-radius: 10px;
}
.col10main .panel > h4:first-child,
.col10main .accordion-group > h4:first-child {
    margin-top: 0;
}
.col10main .panel > div,
.col10main .form-group .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.col10main .table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .04);
    table-layout: fixed;
    width: 100%;
}
.col10main .table th,
.col10main .table td {
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.col10main .table th,
.col10main .titcolor {
    color: #ffffff;
    background: linear-gradient(135deg, #232850 0%, #1e2240 100%);
    font-weight: 700;
}
.col10main .table th:first-child,
.col10main .table td:first-child {
    color: #bcc3d8;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 14px;
    width: 15%;
}
.col10main .table td:nth-child(2) {
    color: #ffffff;
    font-family: inherit;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.col10main .table td code {
    white-space: normal;
    word-break: break-word;
}
.col10main .table td:nth-child(3) {
    color: #ced6e8;
}
.col10main .table-hover > tbody > tr:hover td {
    color: #1f2a44 !important;
}
.col10main .table-hover > tbody > tr:hover th,
.col10main .table-hover > tbody > tr:hover .titcolor {
    color: #1f2a44 !important;
    background: #dce3f0 !important;
}
@media (max-width: 768px) {
    .col10main .accordion {
        padding: 14px;
        border-radius: 12px;
    }
    .col10main .panel {
        padding: 14px;
    }
    .col10main .panel > h4,
    .col10main .accordion-group > h4 {
        font-size: 16px;
        padding: 10px 12px;
    }
    .col10main .table {
        min-width: 720px;
    }
    .col10main .table th,
    .col10main .table td {
        padding: 9px 10px;
    }
}
.bs-docs-demoexample {
    margin-top: 22px;
    padding: 22px 24px;
    background: linear-gradient(135deg, #1e2235 0%, #252a3e 100%);
    border: 1px solid #2d3348;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.bs-docs-demoexample h4 {
    position: relative;
    margin: 0 0 12px;
    padding-left: 14px;
    color: #e2e8f0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}
.bs-docs-demoexample h4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(180deg, #818cf8 0%, #a78bfa 100%);
}
.bs-docs-demoexample p {
    margin: 0;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.8;
}
.bs-docs-demoexample.in,
.bs-docs-demoexample.collapse,
.accordion-group .in.collapse.bs-docs-demoexample {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}
.accordion-group .in.collapse.bs-docs-demoexample {
    margin: 22px 0 0;
    padding: 22px 24px;
    background: linear-gradient(135deg, #1e2235 0%, #252a3e 100%);
    border: 1px solid #2d3348;
    border-left: 4px solid #818cf8;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.accordion-group .in.collapse.bs-docs-demoexample h4 {
    position: relative;
    margin: 0 0 12px;
    padding-left: 14px;
    color: #e2e8f0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}
.accordion-group .in.collapse.bs-docs-demoexample h4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(180deg, #818cf8 0%, #a78bfa 100%);
}
.accordion-group .in.collapse.bs-docs-demoexample p {
    margin: 0;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.8;
}
@media (max-width: 768px) {
    .bs-docs-demoexample {
        padding: 18px;
        border-radius: 12px;
    }
    .bs-docs-demoexample h4 {
        font-size: 18px;
    }
    .bs-docs-demoexample p {
        font-size: 14px;
    }
}
.col10main .accordion .accordion-group .bs-docs-demoexample,
.col10main .accordion .accordion-group .in.collapse.bs-docs-demoexample {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    margin: 22px 0 0 !important;
    padding: 22px 24px !important;
    background: linear-gradient(135deg, #1e2235 0%, #252a3e 100%) !important;
    border: 1px solid #2d3348 !important;
    border-left: 4px solid #818cf8 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25) !important;
}
.col10main .accordion .accordion-group .bs-docs-demoexample h4,
.col10main .accordion .accordion-group .in.collapse.bs-docs-demoexample h4 {
    position: relative !important;
    margin: 0 0 12px !important;
    padding-left: 14px !important;
    color: #e2e8f0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
.col10main .accordion .accordion-group .bs-docs-demoexample h4::before,
.col10main .accordion .accordion-group .in.collapse.bs-docs-demoexample h4::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 5px !important;
    width: 4px !important;
    height: 20px !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #818cf8 0%, #a78bfa 100%) !important;
}
.col10main .accordion .accordion-group .bs-docs-demoexample p,
.col10main .accordion .accordion-group .in.collapse.bs-docs-demoexample p {
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
}
.tool-panel {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;
}
.tool-title {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.copy-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.copy-toast.show {
    opacity: 1;
    visibility: visible;
}
.copy-toast::before {
    content: '✓';
    width: 20px;
    height: 20px;
    background: #4caf50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.copy-toast.success {
    background: rgba(76, 175, 80, 0.9);
}
.copy-toast.error {
    background: rgba(244, 67, 54, 0.9);
}
.copy-btn {
    position: relative;
    cursor: pointer;
}
.copy-btn:hover::after {
    content: '点击复制';
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
}
.copy-btn::after {
    content: '点击复制';
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    pointer-events: none;
}
.calc-converter-page {
    max-width: 1200px;
}

.calc-converter-page .accordion-group {
    position: relative;
    z-index: 1;
}
.calc-converter-page .panel {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.calc-converter-page .form-inline {
    width: 100% !important;
    padding: 0;
}
.calc-converter-page .form-group {
    display: block;
    width: 100%;
    margin: 0;
}
.calc-converter-page .AreaCountCent,
.calc-converter-page .DataStoreCountCent,
.calc-converter-page .ForceCountCent,
.calc-converter-page .AngleCountCent,
.calc-converter-page .HeatCountCent,
.calc-converter-page .TimeCountCent,
.calc-converter-page .VolumeCountCent,
.calc-converter-page .DensityCountCent,
.calc-converter-page .TemperatureCountCent,
.calc-converter-page .SpeedCountCent {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    text-align: left !important;
    list-style: none;
}
.calc-converter-page .AreaCountCent li,
.calc-converter-page .DataStoreCountCent li,
.calc-converter-page .ForceCountCent li,
.calc-converter-page .AngleCountCent li,
.calc-converter-page .HeatCountCent li,
.calc-converter-page .TimeCountCent li,
.calc-converter-page .VolumeCountCent li,
.calc-converter-page .DensityCountCent li,
.calc-converter-page .TemperatureCountCent li,
.calc-converter-page .SpeedCountCent li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 14px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #e6eaf2;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .055);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.calc-converter-page .AreaCountCent li:hover,
.calc-converter-page .DataStoreCountCent li:hover,
.calc-converter-page .ForceCountCent li:hover,
.calc-converter-page .AngleCountCent li:hover,
.calc-converter-page .HeatCountCent li:hover,
.calc-converter-page .TimeCountCent li:hover,
.calc-converter-page .VolumeCountCent li:hover,
.calc-converter-page .DensityCountCent li:hover,
.calc-converter-page .TemperatureCountCent li:hover,
.calc-converter-page .SpeedCountCent li:hover {
    transform: translateY(-2px);
    border-color: rgba(102, 126, 234, .32);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .085);
}
.calc-converter-page label,
.calc-converter-page .w30-0 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 120px;
    width: 120px;
    margin: 0;
    padding-left: 12px;
    color: #1f2937;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    border-left: 3px solid #667eea;
}
.calc-converter-page .mathunit {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}
.calc-converter-page .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    color: #243b53;
    font-size: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, .02);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.calc-converter-page .form-control:focus {
    background: #fff;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, .12);
}
.calc-converter-page .BtnHS {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 20px;
    color: #fff;
    font-weight: 800;
    line-height: 44px;
    letter-spacing: .5px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(102, 126, 234, .24);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.calc-converter-page .BtnHS:hover,
.calc-converter-page .BtnHS:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(102, 126, 234, .28);
}
.calc-area-page .BtnHS {
    background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
    box-shadow: 0 10px 22px rgba(20, 184, 166, .22);
}
.calc-data-page .form-control:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .12);
}
.calc-force-page .BtnHS {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 10px 22px rgba(249, 115, 22, .22);
}
.calc-angle-page .BtnHS {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 10px 22px rgba(139, 92, 246, .22);
}
.calc-converter-page #reset,
.calc-converter-page .UccAllBtn {
    min-width: 150px;
    height: 44px;
    padding: 0 24px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(245, 158, 11, .24);
}
.calc-converter-page hr {
    margin: 22px 0;
    border: 0;
    border-top: 1px solid #edf0f6;
}
.calc-converter-page > .alert-success {
    position: relative;
    margin: 0 0 34px;
    padding: 24px 26px 24px 76px;
    color: #14532d;
    background: linear-gradient(135deg, #ecfdf3 0%, #f7fff9 100%);
    border: 1px solid #bbf7d0;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(34, 197, 94, .09);
}
.calc-converter-page > .alert-success::before {
    content: '换';
    position: absolute;
    left: 24px;
    top: 24px;
    width: 36px;
    height: 36px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 36px;
    text-align: center;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(34, 197, 94, .25);
}
.calc-converter-page > .alert-success h4 {
    margin: 0 0 12px;
    color: #166534;
    font-size: 20px;
    font-weight: 800;
}
.calc-converter-page > .alert-success p {
    margin: 0 0 8px;
    color: #3f694c;
    font-size: 14px;
    line-height: 1.75;
}
.calc-converter-page > .alert-success p:last-child {
    margin-bottom: 0;
}
@media (max-width: 992px) {
    .calc-converter-page .AreaCountCent,
    .calc-converter-page .DataStoreCountCent,
    .calc-converter-page .ForceCountCent,
    .calc-converter-page .AngleCountCent,
    .calc-converter-page .HeatCountCent,
    .calc-converter-page .TimeCountCent,
    .calc-converter-page .VolumeCountCent,
    .calc-converter-page .DensityCountCent,
    .calc-converter-page .TemperatureCountCent,
    .calc-converter-page .SpeedCountCent {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .calc-converter-page .accordion {
        margin: 18px 0 26px;
        padding: 16px;
        border-radius: 14px;
    }
    .calc-converter-page .AreaCountCent li,
    .calc-converter-page .DataStoreCountCent li,
    .calc-converter-page .ForceCountCent li,
    .calc-converter-page .AngleCountCent li,
    .calc-converter-page .HeatCountCent li,
    .calc-converter-page .TimeCountCent li,
    .calc-converter-page .VolumeCountCent li,
    .calc-converter-page .DensityCountCent li,
    .calc-converter-page .TemperatureCountCent li,
    .calc-converter-page .SpeedCountCent li {
        display: grid;
        grid-template-columns: 88px 1fr 68px;
        gap: 8px;
        min-height: auto;
        padding: 10px;
    }
    .calc-converter-page label,
    .calc-converter-page .w30-0 {
        flex: none;
        width: auto;
        font-size: 14px;
    }
    .calc-converter-page .form-control {
        width: 100%;
        height: 40px;
    }
    .calc-converter-page .BtnHS {
        height: 40px;
        padding: 0 12px;
        line-height: 40px;
    }
    .calc-converter-page .DataStoreCountCent li {
        grid-template-columns: 88px 1fr;
    }
    .calc-converter-page > .alert-success {
        padding: 18px 18px 18px 62px;
        border-radius: 14px;
    }
    .calc-converter-page > .alert-success::before {
        left: 18px;
        top: 20px;
        width: 32px;
        height: 32px;
        line-height: 32px;
    }
    .calc-volume-page .vol-cat-title {
        display: flex !important;
        grid-column: 1 / -1;
        grid-template-columns: unset;
        min-height: auto !important;
        padding: 6px 0 !important;
    }
}
@media (max-width: 480px) {
    .calc-converter-page .AreaCountCent li,
    .calc-converter-page .ForceCountCent li,
    .calc-converter-page .AngleCountCent li,
    .calc-converter-page .HeatCountCent li,
    .calc-converter-page .TimeCountCent li,
    .calc-converter-page .VolumeCountCent li,
    .calc-converter-page .DensityCountCent li,
    .calc-converter-page .TemperatureCountCent li,
    .calc-converter-page .SpeedCountCent li {
        grid-template-columns: 1fr;
    }
    .calc-converter-page .BtnHS {
        width: 100%;
    }
    .calc-converter-page .DataStoreCountCent li {
        grid-template-columns: 1fr;
    }
    .calc-converter-page .HeatCountCent,
    .calc-converter-page .TimeCountCent,
    .calc-converter-page .VolumeCountCent,
    .calc-converter-page .DensityCountCent,
    .calc-converter-page .TemperatureCountCent,
    .calc-converter-page .SpeedCountCent {
        grid-template-columns: 1fr;
    }
    .calc-volume-page .vol-cat-title {
        display: flex !important;
        grid-column: 1 / -1;
        grid-template-columns: unset;
        min-height: auto !important;
        padding: 6px 0 !important;
    }
}
.calc-heat-page .HeatCountCent {
    gap: 10px;
}
.calc-heat-page .HeatCountCent li {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.calc-heat-page .HeatCountCent li:hover {
    background: #253348;
    border-color: rgba(239, 68, 68, .40);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}
.calc-heat-page .form-control:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}
.calc-heat-page .BtnHS {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 10px 22px rgba(239, 68, 68, .24);
}
.calc-heat-page .BtnHS:hover,
.calc-heat-page .BtnHS:focus {
    box-shadow: 0 12px 24px rgba(239, 68, 68, .28);
}
.calc-heat-page label,
.calc-heat-page .w30-0 {
    border-left-color: #ef4444;
    color: #e2e8f0;
}
.calc-heat-page label span,
.calc-heat-page .w30-0 span {
    color: #e2e8f0;
}
.calc-heat-page .mathunit {
    color: #94a3b8;
}
.calc-heat-page .HeatTxt {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.calc-heat-page .HeatTxt:focus {
    background: #0f172a;
    color: #e2e8f0;
}
.calc-heat-page .HeatTxt::placeholder {
    color: #64748b;
}
.calc-heat-page .UccAllBtn-wrap {
    text-align: center;
    margin-top: 18px;
}
.calc-density-page .DensityCountCent {
    gap: 10px;
}
.calc-density-page .DensityCountCent li {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.calc-density-page .DensityCountCent li:hover {
    background: #253348;
    border-color: rgba(99, 102, 241, .40);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}
.calc-density-page .form-control:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
.calc-density-page .BtnHS {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 10px 22px rgba(99, 102, 241, .24);
}
.calc-density-page .BtnHS:hover,
.calc-density-page .BtnHS:focus {
    box-shadow: 0 12px 24px rgba(99, 102, 241, .28);
}
.calc-density-page label,
.calc-density-page .w30-0 {
    border-left-color: #6366f1;
    color: #e2e8f0;
}
.calc-density-page label span,
.calc-density-page .w30-0 span {
    color: #e2e8f0;
}
.calc-density-page .mathunit {
    color: #94a3b8;
}
.calc-density-page .DensityTxt {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.calc-density-page .DensityTxt:focus {
    background: #0f172a;
    color: #e2e8f0;
}
.calc-density-page .DensityTxt::placeholder {
    color: #64748b;
}
.calc-density-page .UccAllBtn-wrap {
    text-align: center;
    margin-top: 18px;
}
.calc-temperature-page .TemperatureCountCent {
    gap: 10px;
}
.calc-temperature-page .TemperatureCountCent li {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.calc-temperature-page .TemperatureCountCent li:hover {
    background: #253348;
    border-color: rgba(245, 158, 11, .40);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}
.calc-temperature-page .form-control:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .12);
}
.calc-temperature-page .BtnHS {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 10px 22px rgba(245, 158, 11, .24);
}
.calc-temperature-page .BtnHS:hover,
.calc-temperature-page .BtnHS:focus {
    box-shadow: 0 12px 24px rgba(245, 158, 11, .28);
}
.calc-temperature-page label,
.calc-temperature-page .w30-0 {
    border-left-color: #f59e0b;
    color: #e2e8f0;
}
.calc-temperature-page label span,
.calc-temperature-page .w30-0 span {
    color: #e2e8f0;
}
.calc-temperature-page .mathunit {
    color: #94a3b8;
}
.calc-temperature-page .TemperatureTxt {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.calc-temperature-page .TemperatureTxt:focus {
    background: #0f172a;
    color: #e2e8f0;
}
.calc-temperature-page .TemperatureTxt::placeholder {
    color: #64748b;
}
.calc-temperature-page .UccAllBtn-wrap {
    text-align: center;
    margin-top: 18px;
}
.calc-speed-page .SpeedCountCent {
    gap: 10px;
}
.calc-speed-page .SpeedCountCent li {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.calc-speed-page .SpeedCountCent li:hover {
    background: #253348;
    border-color: rgba(59, 130, 246, .40);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}
.calc-speed-page .form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.calc-speed-page .BtnHS {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 10px 22px rgba(59, 130, 246, .24);
}
.calc-speed-page .BtnHS:hover,
.calc-speed-page .BtnHS:focus {
    box-shadow: 0 12px 24px rgba(59, 130, 246, .28);
}
.calc-speed-page label,
.calc-speed-page .w30-0 {
    border-left-color: #3b82f6;
    color: #e2e8f0;
}
.calc-speed-page label span,
.calc-speed-page .w30-0 span {
    color: #e2e8f0;
}
.calc-speed-page .mathunit {
    color: #94a3b8;
}
.calc-speed-page .SpeedTxt {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.calc-speed-page .SpeedTxt:focus {
    background: #0f172a;
    color: #e2e8f0;
}
.calc-speed-page .SpeedTxt::placeholder {
    color: #64748b;
}
.calc-speed-page .UccAllBtn-wrap {
    text-align: center;
    margin-top: 18px;
}
.worldtime-page .tbtime,
.worldtime-page .tbtime.table-striped {
    background-color: #0f172a;
    border-color: #1e293b;
}
.worldtime-page .tbtime tr:nth-child(odd) > td,
.worldtime-page .tbtime tr:nth-child(even) > td,
.worldtime-page .tbtime.table-striped > tbody > tr:nth-child(odd) > td,
.worldtime-page .tbtime.table-striped > tbody > tr:nth-child(even) > td {
    background-color: #1e293b;
    color: #dde2f0;
    border-color: #334155;
}
.worldtime-page .tbtime tr:hover > td {
    background-color: #dde2f0 !important;
    color: #0f172a !important;
    transition: all .2s ease;
}
.worldtime-page .tbtime tr:hover > td input.show-area {
    background-color: #dde2f0;
    color: #0f172a;
    border-color: #cbd5e1;
}
.worldtime-page .tbtime td {
    color: #dde2f0;
    border-color: #334155;
}
.worldtime-page .tbtime input.show-area {
    background: #0f172a;
    border: 1px solid #475569;
    color: #dde2f0;
    text-align: center;
    border-radius: 4px;
    padding: 4px 6px;
}
.worldtime-page .tbtime input[name="local"] {
    background: transparent;
    border: 0;
    color: #93c5fd;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
}
.calc-volume-page .VolumeCountCent {
    gap: 10px;
}
.calc-volume-page .VolumeCountCent li {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.calc-volume-page .VolumeCountCent li:hover {
    background: #253348;
    border-color: rgba(20, 184, 166, .40);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}
.calc-volume-page .vol-cat-title {
    display: flex !important;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    min-height: auto !important;
    padding: 6px 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none;
}
.calc-volume-page .vol-cat-title span {
    font-size: 14px;
    font-weight: 700;
    color: #5eead4;
    padding: 6px 24px;
    border-bottom: 2px solid #14b8a6;
}
.calc-volume-page .form-control:focus {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .12);
}
.calc-volume-page .BtnHS {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    box-shadow: 0 10px 22px rgba(20, 184, 166, .24);
}
.calc-volume-page .BtnHS:hover,
.calc-volume-page .BtnHS:focus {
    box-shadow: 0 12px 24px rgba(20, 184, 166, .28);
}
.calc-volume-page label,
.calc-volume-page .w30-0 {
    border-left-color: #14b8a6;
    color: #e2e8f0;
}
.calc-volume-page label span,
.calc-volume-page .w30-0 span {
    color: #e2e8f0;
}
.calc-volume-page .mathunit {
    color: #94a3b8;
}
.calc-volume-page .VolumeTxt {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.calc-volume-page .VolumeTxt:focus {
    background: #0f172a;
    color: #e2e8f0;
}
.calc-volume-page .VolumeTxt::placeholder {
    color: #64748b;
}
.calc-volume-page .UccAllBtn-wrap {
    text-align: center;
    margin-top: 18px;
}
.calc-uuid-page .panel {
    background: #1e293b;
    border-radius: 12px;
    padding: 24px 20px;
}
.calc-uuid-page .form-group {
    margin-bottom: 18px;
}
.calc-uuid-page .uuid-label {
    color: #c4b5fd;
    font-weight: 600;
    padding-top: 8px;
}
.calc-uuid-page .uuid-select,
.calc-uuid-page .uuid-select:focus {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
    height: 42px;
    border-radius: 8px;
}
.calc-uuid-page .uuid-select option {
    background: #1e293b;
    color: #e2e8f0;
}
.calc-uuid-page .uuid-select:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .15);
}
.calc-uuid-page .uuid-format-group {
    padding-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.calc-uuid-page .uuid-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #94a3b8;
    font-weight: normal;
    margin: 0;
    transition: color .2s;
}
.calc-uuid-page .uuid-radio:hover {
    color: #c4b5fd;
}
.calc-uuid-page .uuid-radio input[type="radio"] {
    accent-color: #8b5cf6;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
.calc-uuid-page .uuid-radio:has(input:checked) {
    color: #c4b5fd;
    font-weight: 600;
}
.calc-uuid-page .uuid-btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 4px;
}
.calc-uuid-page .uuid-btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 10px 32px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(139, 92, 246, .28);
    transition: all .25s;
}
.calc-uuid-page .uuid-btn-primary:hover,
.calc-uuid-page .uuid-btn-primary:focus {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    box-shadow: 0 12px 28px rgba(139, 92, 246, .36);
    color: #fff;
}
.calc-uuid-page .uuid-btn-copy {
    background: #334155;
    border: 1px solid #475569;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 500;
    transition: all .2s;
}
.calc-uuid-page .uuid-btn-copy:hover {
    background: #475569;
    border-color: #64748b;
    color: #fff;
}
.calc-uuid-page .uuid-btn-clear {
    background: transparent;
    border: 1px solid #475569;
    color: #94a3b8;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 500;
    transition: all .2s;
}
.calc-uuid-page .uuid-btn-clear:hover {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .4);
    color: #f87171;
}
.calc-uuid-page .uuid-result {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #c4b5fd;
    font-family: 'Courier New', Courier, 'Source Code Pro', Consolas, monospace;
    font-size: 14px;
    line-height: 1.8;
    padding: 18px 20px;
    min-height: 60px;
    word-break: break-all;
    margin-top: 8px;
}
.calc-uuid-page .uuid-line {
    padding: 3px 0;
    color: #a5b4fc;
    border-bottom: 1px solid rgba(51, 65, 85, .4);
}
.calc-uuid-page .uuid-line:last-child {
    border-bottom: none;
}
.calc-uuid-page .bs-docs-demoexample {
    background: #1e293b;
    border-radius: 8px;
    padding: 20px 24px;
    margin-top: 12px;
}
.calc-uuid-page .bs-docs-demoexample h4 {
    color: #c4b5fd;
}
.calc-uuid-page .bs-docs-demoexample p {
    color: #94a3b8;
}
.calc-uuid-page .bs-docs-demoexample code {
    background: #0f172a;
    color: #a78bfa;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}
@media (max-width: 768px) {
    .calc-uuid-page .panel {
        padding: 16px 12px;
    }
    .calc-uuid-page .uuid-label {
        padding-top: 0;
        margin-bottom: 6px;
    }
    .calc-uuid-page .uuid-format-group {
        flex-direction: column;
        gap: 8px;
    }
    .calc-uuid-page .uuid-btn-group {
        flex-direction: column;
        align-items: stretch;
    }
    .calc-uuid-page .uuid-btn-group .btn {
        width: 100%;
    }
    .calc-uuid-page .uuid-result {
        font-size: 12px;
        padding: 14px;
        line-height: 1.6;
    }
}
@media (max-width: 480px) {
    .calc-uuid-page .uuid-label {
        font-size: 13px;
    }
    .calc-uuid-page .uuid-btn-primary {
        font-size: 15px;
        padding: 12px 20px;
    }
}
.calc-unixtime-page .panel {
    background: #1e293b;
    border-radius: 12px;
    padding: 24px 20px;
    border: none;
    margin-bottom: 0;
}
.calc-unixtime-page .panel-body {
    border: none;
    padding: 0;
}
.calc-unixtime-page .ux-time-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 28px;
}
.calc-unixtime-page .ux-time-card {
    flex: 1;
    min-width: 180px;
}
.calc-unixtime-page .ux-time-label {
    color: #fbbf24;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
}
.calc-unixtime-page .ux-time-card .form-control {
    background: #0f172a;
    border: 2px solid #334155;
    color: #e2e8f0;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 15px;
    height: 44px;
    border-radius: 8px;
}
.calc-unixtime-page .ux-time-card .form-control:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
}
.calc-unixtime-page .ux-time-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.calc-unixtime-page .ux-time-actions .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    white-space: nowrap;
}
.calc-unixtime-page .ux-btn-start {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    color: #fff;
    box-shadow: 0 6px 16px rgba(245, 158, 11, .24);
}
.calc-unixtime-page .ux-btn-start:hover {
    box-shadow: 0 10px 24px rgba(245, 158, 11, .36);
    color: #fff;
}
.calc-unixtime-page .ux-btn-stop {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .3);
    color: #f87171;
}
.calc-unixtime-page .ux-btn-stop:hover {
    background: rgba(239, 68, 68, .2);
    border-color: rgba(239, 68, 68, .5);
    color: #fca5a5;
}
.calc-unixtime-page .ux-btn-refresh {
    background: rgba(99, 102, 241, .12);
    border: 1px solid rgba(99, 102, 241, .3);
    color: #a5b4fc;
}
.calc-unixtime-page .ux-btn-refresh:hover {
    background: rgba(99, 102, 241, .2);
    border-color: rgba(99, 102, 241, .5);
    color: #c7d2fe;
}
.calc-unixtime-page .ux-section-title {
    color: #fbbf24;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 0 8px 0;
    margin-bottom: 10px;
    border-bottom: 2px solid rgba(245, 158, 11, .2);
}
.calc-unixtime-page .ux-convert-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 24px;
}
.calc-unixtime-page .ux-convert-card {
    flex: 1;
    min-width: 160px;
}
.calc-unixtime-page .ux-input-label {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}
.calc-unixtime-page .ux-convert-card .form-control {
    background: #0f172a;
    border: 1px solid #334155;
    color: #e2e8f0;
    height: 44px;
    border-radius: 8px;
    font-size: 14px;
}
.calc-unixtime-page .ux-convert-card .form-control:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .12);
}
.calc-unixtime-page .ux-convert-card .form-control::placeholder {
    color: #64748b;
}
.calc-unixtime-page .ux-convert-arrow {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0;
}
.calc-unixtime-page .ux-btn-convert {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: 2px solid rgba(245, 158, 11, .5);
    color: #fff;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(245, 158, 11, .22);
    transition: all .25s;
}
.calc-unixtime-page .ux-btn-convert:hover {
    box-shadow: 0 10px 24px rgba(245, 158, 11, .34);
    transform: translateY(-1px);
    color: #fff;
}
.calc-unixtime-page .ux-intro {
    background: #1e293b;
    border-radius: 10px;
    padding: 22px 24px;
    margin-top: 0;
}
.calc-unixtime-page .ux-intro h4 {
    color: #fbbf24;
}
.calc-unixtime-page .ux-intro p {
    color: #94a3b8;
}
.calc-unixtime-page .ux-intro code {
    background: #0f172a;
    color: #fbbf24;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}
.calc-unixtime-page .ux-table-panel {
    background: #1e293b;
    border-radius: 10px;
    padding: 22px 20px;
    margin-bottom: 16px;
}
.calc-unixtime-page .ux-table-panel h4 {
    color: #fbbf24;
    font-size: 15px;
    margin-bottom: 14px;
}
.calc-unixtime-page .ux-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.calc-unixtime-page .ux-table thead th {
    background: #0f172a;
    color: #fbbf24;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid rgba(245, 158, 11, .25);
}
.calc-unixtime-page .ux-table thead th:first-child {
    border-radius: 6px 0 0 0;
    width: 160px;
}
.calc-unixtime-page .ux-table thead th:last-child {
    border-radius: 0 6px 0 0;
}
.calc-unixtime-page .ux-table tbody td {
    padding: 9px 14px;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(51, 65, 85, .5);
    vertical-align: top;
    line-height: 1.6;
}
.calc-unixtime-page .ux-table tbody tr:nth-child(even) td {
    background: rgba(15, 23, 42, .4);
}
.calc-unixtime-page .ux-table tbody tr:hover td {
    background: rgba(245, 158, 11, .06);
}
.calc-unixtime-page .ux-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}
.calc-unixtime-page .ux-table tbody tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}
.calc-unixtime-page .ux-table small {
    color: #64748b;
    font-size: 12px;
}
@media (max-width: 768px) {
    .calc-unixtime-page .panel {
        padding: 16px 12px;
    }
    .calc-unixtime-page .ux-time-row,
    .calc-unixtime-page .ux-convert-row {
        flex-direction: column;
        gap: 10px;
    }
    .calc-unixtime-page .ux-time-card,
    .calc-unixtime-page .ux-convert-card {
        min-width: 100%;
    }
    .calc-unixtime-page .ux-time-actions {
        width: 100%;
    }
    .calc-unixtime-page .ux-time-actions .btn {
        flex: 1;
        text-align: center;
    }
    .calc-unixtime-page .ux-convert-arrow {
        justify-content: center;
        width: 100%;
    }
    .calc-unixtime-page .ux-btn-convert {
        width: 100%;
        text-align: center;
        font-size: 15px;
        padding: 13px 20px;
        border-radius: 10px;
        border-width: 2px;
        box-shadow: 0 4px 14px rgba(245, 158, 11, .28);
    }
    .calc-unixtime-page .ux-table-panel {
        padding: 14px 10px;
        overflow-x: auto;
    }
    .calc-unixtime-page .ux-table {
        font-size: 12px;
        min-width: 500px;
    }
    .calc-unixtime-page .ux-table thead th,
    .calc-unixtime-page .ux-table tbody td {
        padding: 7px 10px;
    }
}
@media (max-width: 480px) {
    .calc-unixtime-page .ux-time-card .form-control {
        font-size: 13px;
        height: 40px;
    }
    .calc-unixtime-page .ux-intro {
        padding: 16px 14px;
    }
    .calc-unixtime-page .ux-btn-convert {
        font-size: 16px;
        padding: 14px 16px;
        letter-spacing: .3px;
    }
}
.calc-shizhong-page .panel {
    background: #1e293b;
    border-radius: 12px;
    padding: 30px 20px;
}
.sz-clock-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.sz-clock-face {
    position: relative;
    width: 260px;
    height: 260px;
    border: 4px solid #06b6d4;
    border-radius: 50%;
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
    box-shadow:
        0 0 30px rgba(6, 182, 212, .15),
        0 0 80px rgba(6, 182, 212, .06),
        inset 0 0 40px rgba(0, 0, 0, .3);
}
.sz-clock-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    background: #06b6d4;
    border-radius: 50%;
    z-index: 15;
    box-shadow: 0 0 10px rgba(6, 182, 212, .5);
}
.sz-tick {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 2px;
    height: 14px;
    margin-left: -1px;
    background: #475569;
    border-radius: 1px;
    transform-origin: 50% 122px;
}
.sz-tick-1  { transform: rotate(30deg); }
.sz-tick-2  { transform: rotate(60deg); }
.sz-tick-3  { transform: rotate(90deg);  background: #06b6d4; width: 3px; margin-left: -1.5px; height: 20px; }
.sz-tick-4  { transform: rotate(120deg); }
.sz-tick-5  { transform: rotate(150deg); }
.sz-tick-6  { transform: rotate(180deg); background: #06b6d4; width: 3px; margin-left: -1.5px; height: 20px; }
.sz-tick-7  { transform: rotate(210deg); }
.sz-tick-8  { transform: rotate(240deg); }
.sz-tick-9  { transform: rotate(270deg); background: #06b6d4; width: 3px; margin-left: -1.5px; height: 20px; }
.sz-tick-10 { transform: rotate(300deg); }
.sz-tick-11 { transform: rotate(330deg); }
.sz-tick-12 { transform: rotate(0deg);   background: #06b6d4; width: 3px; margin-left: -1.5px; height: 20px; }
.sz-num {
    position: absolute;
    color: #06b6d4;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin-left: -14px;
    margin-top: -14px;
}
.sz-num-12 { left: 50%; top: 18px; }
.sz-num-3  { left: calc(100% - 24px); top: 50%; }
.sz-num-6  { left: 50%; top: calc(100% - 28px); }
.sz-num-9  { left: 10px; top: 50%; }
.sz-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% 100%;
    border-radius: 3px;
    transition: transform .05s linear;
}
.sz-hand-hour {
    width: 6px;
    height: 60px;
    margin-left: -3px;
    background: linear-gradient(to top, #06b6d4, #22d3ee);
    border-radius: 4px 4px 2px 2px;
    z-index: 10;
}
.sz-hand-min {
    width: 4px;
    height: 82px;
    margin-left: -2px;
    background: linear-gradient(to top, #38bdf8, #7dd3fc);
    border-radius: 3px 3px 2px 2px;
    z-index: 11;
}
.sz-hand-sec {
    width: 2px;
    height: 95px;
    margin-left: -1px;
    background: #ef4444;
    border-radius: 1px;
    z-index: 12;
}
.sz-hand-sec::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: #ef4444;
    border-radius: 50%;
    z-index: 13;
}
.sz-digital-time {
    font-family: 'Courier New', Consolas, 'Source Code Pro', monospace;
    font-size: 48px;
    font-weight: 700;
    color: #06b6d4;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(6, 182, 212, .35);
}
.sz-digital-date {
    font-size: 16px;
    color: #94a3b8;
    margin-top: -10px;
}
.calc-shizhong-page .sz-intro {
    background: #1e293b;
    border-radius: 10px;
    padding: 22px 24px;
    margin-top: 12px;
}
.calc-shizhong-page .sz-intro h4 {
    color: #06b6d4;
}
.calc-shizhong-page .sz-intro p {
    color: #94a3b8;
    line-height: 1.8;
}
@media (max-width: 768px) {
    .calc-shizhong-page .panel {
        padding: 20px 12px;
    }
    .sz-clock-face {
        width: 220px;
        height: 220px;
    }
    .sz-tick {
        transform-origin: 50% 102px;
    }
    .sz-hand-hour { height: 50px; }
    .sz-hand-min { height: 68px; }
    .sz-hand-sec { height: 80px; }
    .sz-digital-time {
        font-size: 36px;
        letter-spacing: 2px;
    }
    .sz-digital-date {
        font-size: 14px;
    }
    .calc-shizhong-page .sz-intro {
        padding: 16px 14px;
    }
}
@media (max-width: 480px) {
    .sz-clock-face {
        width: 180px;
        height: 180px;
    }
    .sz-tick {
        transform-origin: 50% 82px;
    }
    .sz-hand-hour { height: 40px; }
    .sz-hand-min { height: 55px; }
    .sz-hand-sec { height: 65px; }
    .sz-clock-center {
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;
    }
    .sz-num {
        font-size: 14px;
        width: 22px;
        height: 22px;
        line-height: 22px;
        margin-left: -11px;
        margin-top: -11px;
    }
    .sz-digital-time {
        font-size: 28px;
    }
}
.calc-random-page .panel {
    background: #1e293b;
    border-radius: 12px;
    padding: 24px 20px;
    border: none;
}
.calc-random-page .rd-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.calc-random-page .rd-field {
    flex: 1;
    min-width: 0;
}
.calc-random-page .rd-label {
    display: block;
    color: #4ade80;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
}
.calc-random-page .rd-input {
    background: #0f172a;
    border: 1px solid #334155;
    color: #e2e8f0;
    height: 42px;
    border-radius: 8px;
    font-size: 14px;
    width: 100%;
}
.calc-random-page .rd-input:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .15);
    background: #0f172a;
    color: #e2e8f0;
}
.calc-random-page .rd-select {
    cursor: pointer;
}
.calc-random-page .rd-select option {
    background: #1e293b;
    color: #e2e8f0;
}
.calc-random-page .rd-btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 4px;
}
.calc-random-page .rd-btn-generate {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(34, 197, 94, .25);
    transition: all .25s;
}
.calc-random-page .rd-btn-generate:hover,
.calc-random-page .rd-btn-generate:focus {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    box-shadow: 0 12px 28px rgba(34, 197, 94, .35);
    color: #fff;
}
.calc-random-page .rd-btn-copy {
    background: #334155;
    border: 1px solid #475569;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 500;
    transition: all .2s;
}
.calc-random-page .rd-btn-copy:hover {
    background: #475569;
    border-color: #64748b;
    color: #fff;
}
.calc-random-page .rd-btn-copied {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border-color: #22c55e !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, .4);
}
.calc-random-page .rd-btn-clear {
    background: transparent;
    border: 1px solid #475569;
    color: #94a3b8;
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 500;
    transition: all .2s;
}
.calc-random-page .rd-btn-clear:hover {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .4);
    color: #f87171;
}
.calc-random-page .rd-result {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #4ade80;
    font-family: 'Courier New', Consolas, 'Source Code Pro', monospace;
    font-size: 15px;
    line-height: 1.9;
    padding: 18px 20px;
    min-height: 56px;
    word-break: break-all;
    margin-top: 4px;
}
.calc-random-page .rd-result b {
    background: rgba(34, 197, 94, .12);
    color: #4ade80;
    font-weight: 700;
    padding: 2px 8px;
    margin: 0 3px;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid rgba(34, 197, 94, .2);
}
.calc-random-page .rd-intro {
    background: #1e293b;
    border-radius: 10px;
    padding: 22px 24px;
    margin-top: 12px;
}
.calc-random-page .rd-intro h4 {
    color: #4ade80;
}
.calc-random-page .rd-intro p {
    color: #94a3b8;
    line-height: 1.8;
}
@media (max-width: 768px) {
    .calc-random-page .panel {
        padding: 16px 12px;
    }
    .calc-random-page .rd-row {
        flex-direction: column;
        gap: 12px;
    }
    .calc-random-page .rd-label {
        text-align: left;
    }
    .calc-random-page .rd-btn-group {
        flex-direction: column;
        align-items: stretch;
    }
    .calc-random-page .rd-btn-group .btn {
        width: 100%;
    }
    .calc-random-page .rd-result {
        font-size: 13px;
        padding: 14px;
        line-height: 1.7;
    }
    .calc-random-page .rd-intro {
        padding: 16px 14px;
    }
}
@media (max-width: 480px) {
    .calc-random-page .rd-label {
        font-size: 13px;
    }
    .calc-random-page .rd-btn-generate {
        font-size: 15px;
        padding: 12px 20px;
    }
}
.calc-calc-page .panel-default {
    background: transparent;
    border: none;
}
.calc-calc-page .CalculatorWrap {
    max-width: 100%;
    margin: 0 auto;
    background: linear-gradient(160deg, #1a1f2e 0%, #1e293b 100%);
    border-radius: 16px;
    padding: 24px 20px 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
    border: 1px solid #2d3a50;
}
.calc-calc-page .CalculTable {
    width: 100%;
}
.calc-calc-page .ShowAreaWrap {
    margin-bottom: 16px;
}
.calc-calc-page .ShowAreaWrap .ShowArea {
    width: 100%;
    height: 60px;
    background: #0a0e14;
    border: 1px solid #2a3344;
    border-radius: 10px;
    color: #22d3ee;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 28px;
    font-weight: 700;
    text-align: right;
    padding: 8px 16px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
    letter-spacing: 1px;
}
.calc-calc-page .ShowAreaWrap .ShowArea:focus {
    outline: none;
    border-color: #22d3ee;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 12px rgba(34, 211, 238, .15);
}
.calc-calc-page .heachackWrap {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}
.calc-calc-page .heachackWrap li {
    display: flex;
    align-items: center;
    color: #94a3b8;
    font-size: 13px;
    white-space: nowrap;
}
.calc-calc-page .heachackWrap li input[type="radio"],
.calc-calc-page .heachackWrap li input[type="checkbox"] {
    margin-right: 5px;
    accent-color: #22d3ee;
    cursor: pointer;
}
.calc-calc-page .heachackWrap li.fr {
    margin-left: auto;
}
.calc-calc-page .heachackWrap .HTxt01 {
    width: 44px;
    height: 26px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 4px;
    color: #f59e0b;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
}
.calc-calc-page input.Hcolor01 {
    background: #334155;
    border: 1px solid #475569;
    color: #cbd5e1;
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    min-width: 44px;
}
.calc-calc-page input.Hcolor01:hover {
    background: #475569;
    border-color: #64748b;
    color: #fff;
}
.calc-calc-page input.Hcolor01:active {
    background: #1e293b;
    transform: scale(.96);
}
.calc-calc-page .CentChackBox {
    display: flex;
    gap: 8px;
}
.calc-calc-page .CentChackLeft {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
}
.calc-calc-page .CentChackLeft li {
    display: flex;
    gap: 5px;
}
.calc-calc-page input.Lcolor01 {
    width: 52px;
    height: 38px;
    background: #1e293b;
    border: 1px solid #3b4a60;
    color: #94a3b8;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
    padding: 0 4px;
}
.calc-calc-page input.Lcolor01:hover {
    background: #2d3d55;
    border-color: #5b6e8c;
    color: #e2e8f0;
}
.calc-calc-page input.Lcolor01:active {
    background: #0f172a;
    transform: scale(.95);
}
.calc-calc-page input.Lcolor02 {
    width: 52px;
    height: 38px;
    background: #1a2740;
    border: 1px solid #3b5998;
    color: #60a5fa;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
    padding: 0 4px;
}
.calc-calc-page input.Lcolor02:hover {
    background: #1e3a5f;
    border-color: #6098d0;
    color: #93c5fd;
}
.calc-calc-page .CentChackSide {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 auto;
}
.calc-calc-page .CentChackSide input.Hcolor01 {
    width: 54px;
    height: 30px;
    font-size: 12px;
}
.calc-calc-page .CentChackRight {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}
.calc-calc-page .CentChackRight li {
    display: flex;
    gap: 5px;
}
.calc-calc-page input.Rcolor01 {
    width: 52px;
    height: 38px;
    background: #1e293b;
    border: 1px solid #4a5568;
    color: #e2e8f0;
    border-radius: 7px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
    flex: 1;
}
.calc-calc-page input.Rcolor01:hover {
    background: #2d3d55;
    border-color: #718096;
    color: #fff;
}
.calc-calc-page input.Rcolor01:active {
    background: #0f172a;
    transform: scale(.95);
}
.calc-calc-page input.Rcolor02 {
    width: 52px;
    height: 38px;
    background: #1a2740;
    border: 1px solid #0e7490;
    color: #22d3ee;
    border-radius: 7px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
    flex: 1;
}
.calc-calc-page input.Rcolor02:hover {
    background: #155e75;
    border-color: #06b6d4;
    color: #67e8f9;
}
.calc-calc-page input.Rcolor02:active {
    background: #0c3d52;
    transform: scale(.95);
}
.calc-calc-page .CentChackBox input:disabled {
    opacity: .3;
    cursor: not-allowed;
    pointer-events: none;
}
.calc-calc-page input[value="＝"] {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    border-color: #06b6d4 !important;
    color: #fff !important;
    font-size: 18px !important;
}
.calc-calc-page input[value="＝"]:hover {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    box-shadow: 0 4px 16px rgba(6, 182, 212, .35);
}
.calc-calc-page .calc-intro {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 20px;
}
.calc-calc-page .calc-intro h4 {
    color: #22d3ee;
    font-size: 16px;
    margin-bottom: 10px;
}
.calc-calc-page .calc-intro p {
    color: #94a3b8;
    line-height: 1.7;
    font-size: 13px;
}
@media (max-width: 768px) {
    .calc-calc-page .CalculatorWrap {
        padding: 16px 10px 14px;
        border-radius: 12px;
    }
    .calc-calc-page .ShowAreaWrap .ShowArea {
        height: 48px;
        font-size: 22px;
        padding: 6px 12px;
    }
    .calc-calc-page .CentChackBox {
        gap: 4px;
    }
    .calc-calc-page input.Lcolor01,
    .calc-calc-page input.Lcolor02 {
        width: 42px;
        height: 32px;
        font-size: 11px;
        border-radius: 5px;
    }
    .calc-calc-page input.Rcolor01,
    .calc-calc-page input.Rcolor02 {
        width: 42px;
        height: 34px;
        font-size: 13px;
        border-radius: 5px;
    }
    .calc-calc-page .CentChackSide input.Hcolor01 {
        width: 44px;
        height: 26px;
        font-size: 11px;
    }
    .calc-calc-page .heachackWrap {
        font-size: 11px;
        gap: 4px 8px;
    }
    .calc-calc-page .heachackWrap li {
        font-size: 11px;
    }
    .calc-calc-page .heachackWrap .HTxt01 {
        width: 36px;
        height: 22px;
        font-size: 11px;
    }
}
@media (max-width: 480px) {
    .calc-calc-page .CalculatorWrap {
        padding: 12px 6px 10px;
    }
    .calc-calc-page .CentChackBox {
        gap: 3px;
    }
    .calc-calc-page input.Lcolor01,
    .calc-calc-page input.Lcolor02 {
        width: 34px;
        height: 28px;
        font-size: 10px;
        border-radius: 4px;
    }
    .calc-calc-page input.Rcolor01,
    .calc-calc-page input.Rcolor02 {
        width: 34px;
        height: 30px;
        font-size: 12px;
        border-radius: 4px;
    }
    .calc-calc-page .CentChackSide {
        display: none;
    }
    .calc-calc-page .ShowAreaWrap .ShowArea {
        height: 42px;
        font-size: 18px;
    }
    .calc-calc-page input.Hcolor01 {
        padding: 5px 8px;
        font-size: 11px;
        min-width: 32px;
    }
}
.calc-time-page .TimeCountCent {
    gap: 10px;
}
.calc-time-page .TimeCountCent li {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.calc-time-page .TimeCountCent li:hover {
    background: #253348;
    border-color: rgba(99, 102, 241, .40);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}
.calc-time-page .form-control:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
.calc-time-page .BtnHS {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 10px 22px rgba(99, 102, 241, .24);
}
.calc-time-page .BtnHS:hover,
.calc-time-page .BtnHS:focus {
    box-shadow: 0 12px 24px rgba(99, 102, 241, .28);
}
.calc-time-page label,
.calc-time-page .w30-0 {
    border-left-color: #6366f1;
    color: #e2e8f0;
}
.calc-time-page label span,
.calc-time-page .w30-0 span {
    color: #e2e8f0;
}
.calc-time-page .mathunit {
    color: #94a3b8;
}
.calc-time-page .TimeTxt {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.calc-time-page .TimeTxt:focus {
    background: #0f172a;
    color: #e2e8f0;
}
.calc-time-page .TimeTxt::placeholder {
    color: #64748b;
}
.calc-time-page .UccAllBtn-wrap {
    text-align: center;
    margin-top: 18px;
}
@media (max-width: 768px) {
    .calc-time-page .TimeCountCent li {
        grid-template-columns: 88px 1fr 68px;
    }
}
@media (max-width: 480px) {
    .calc-time-page .TimeCountCent li {
        grid-template-columns: 1fr;
    }
    .calc-time-page .BtnHS {
        width: 100%;
    }
}
.caiji-page {
    max-width: 1200px;
}
.caiji-page .accordion {
    position: relative;
    margin: 26px 0 34px;
    padding: 26px;
    background: linear-gradient(180deg, #1a1e2e 0%, #151929 100%);
    border: 1px solid #2d2d44;
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.caiji-page .accordion::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -70px;
    width: 190px;
    height: 190px;
    background: radial-gradient(circle, rgba(102, 126, 234, .1), transparent 68%);
    border-radius: 50%;
    pointer-events: none;
}
.caiji-page .accordion-group:first-child {
    position: relative;
    z-index: 1;
}
.caiji-page .panel {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.caiji-page .input-group.mb5 {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0 0 18px;
    padding: 8px;
    background: rgba(15, 20, 35, 0.5);
    border: 1px solid rgba(102, 126, 234, 0.1);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
.caiji-page .input-group .form-control {
    flex: 1 1 auto;
    float: none;
    height: 48px;
    padding: 0 16px;
    color: #d0d0e0;
    font-size: 15px;
    background: #1e1e32;
    border: 1px solid transparent;
    border-radius: 12px 0 0 12px;
    box-shadow: none;
}
.caiji-page .input-group .form-control:focus {
    background: #252540;
    border-color: #667eea;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, .18);
}
.caiji-page .input-group-btn {
    display: flex;
    width: auto;
    font-size: 14px;
}
.caiji-page .input-group-btn > .btn {
    min-width: 110px;
    height: 48px;
    margin-left: 5px;
    padding: 0 22px;
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(34, 197, 94, .24);
}
.caiji-page .input-group-btn > .btn-default {
    color: #c0c0d0;
    background: #2a2a40;
    border: 1px solid #3d3d55;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}
.caiji-page .input-group-btn > .btn:hover,
.caiji-page .input-group-btn > .btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(34, 197, 94, .3);
    opacity: 1;
}
.caiji-page .input-group-btn > .btn-default:hover,
.caiji-page .input-group-btn > .btn-default:focus {
    background: #3a3a52;
    color: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
}
.caiji-page .form-group {
    display: block;
    width: 100%;
    margin: 0;
}
.caiji-page .form-group .col-sm-12 {
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.caiji-page textarea.form-control {
    width: 100%;
    min-height: 420px;
    padding: 18px 20px;
    color: #c0c0d0;
    font-size: 14px;
    line-height: 1.8;
    resize: vertical;
    background: #16162a;
    border: 1px solid #2d2d44;
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02), 0 10px 26px rgba(0, 0, 0, .25);
}
.caiji-page textarea.form-control:focus {
    border-color: #667eea;
    color: #e0e0f0;
    background: #1a1a32;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, .12), 0 12px 28px rgba(0, 0, 0, .35);
}
.caiji-page textarea.form-control::placeholder,
.caiji-page .input-group .form-control::placeholder {
    color: #5a5a75;
}
.caiji-page .alert-success {
    position: relative;
    z-index: 1;
    margin: 22px 0 0;
    padding: 22px 24px 22px 72px;
    color: #a0c8a0;
    background: linear-gradient(135deg, #162818 0%, #1a2e1e 100%);
    border: 1px solid #2a442a;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}
.caiji-page .alert-success::before {
    content: '采';
    position: absolute;
    left: 24px;
    top: 24px;
    width: 34px;
    height: 34px;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 34px;
    text-align: center;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(34, 197, 94, .25);
}
.caiji-page .alert-success h4 {
    margin: 0 0 8px;
    color: #70b070;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
}
.caiji-page .alert-success p {
    margin: 0;
    color: #78a878;
    font-size: 14px;
    line-height: 1.8;
}
@media (max-width: 768px) {
    .caiji-page .accordion {
        margin: 18px 0 26px;
        padding: 16px;
        border-radius: 14px;
    }
    .caiji-page .input-group.mb5 {
        flex-direction: column;
        padding: 10px;
        gap: 10px;
    }
    .caiji-page .input-group .form-control {
        width: 100%;
        border-radius: 12px;
    }
    .caiji-page .input-group-btn {
        display: flex;
        width: 100%;
        gap: 5px;
    }
    .caiji-page .input-group-btn > .btn {
        flex: 1;
        width: auto;
        min-width: 0;
        margin-left: 0;
    }
    .caiji-page textarea.form-control {
        min-height: 340px;
        padding: 14px;
    }
    .caiji-page .alert-success {
        padding: 18px 18px 18px 62px;
        border-radius: 14px;
    }
    .caiji-page .alert-success::before {
        left: 18px;
        top: 20px;
    }
}
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
         url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before { content: "\002a"; }
.glyphicon-plus:before { content: "\002b"; }
.glyphicon-euro:before,
.glyphicon-eur:before { content: "\20ac"; }
.glyphicon-minus:before { content: "\2212"; }
.glyphicon-cloud:before { content: "\2601"; }
.glyphicon-envelope:before { content: "\2709"; }
.glyphicon-pencil:before { content: "\270f"; }
.glyphicon-glass:before { content: "\e001"; }
.glyphicon-music:before { content: "\e002"; }
.glyphicon-search:before { content: "\e003"; }
.glyphicon-heart:before { content: "\e005"; }
.glyphicon-star:before { content: "\e006"; }
.glyphicon-star-empty:before { content: "\e007"; }
.glyphicon-user:before { content: "\e008"; }
.glyphicon-film:before { content: "\e009"; }
.glyphicon-th-large:before { content: "\e010"; }
.glyphicon-th:before { content: "\e011"; }
.glyphicon-th-list:before { content: "\e012"; }
.glyphicon-ok:before { content: "\e013"; }
.glyphicon-remove:before { content: "\e014"; }
.glyphicon-zoom-in:before { content: "\e015"; }
.glyphicon-zoom-out:before { content: "\e016"; }
.glyphicon-off:before { content: "\e017"; }
.glyphicon-signal:before { content: "\e018"; }
.glyphicon-cog:before { content: "\e019"; }
.glyphicon-trash:before { content: "\e020"; }
.glyphicon-home:before { content: "\e021"; }
.glyphicon-file:before { content: "\e022"; }
.glyphicon-time:before { content: "\e023"; }
.glyphicon-road:before { content: "\e024"; }
.glyphicon-download-alt:before { content: "\e025"; }
.glyphicon-download:before { content: "\e026"; }
.glyphicon-upload:before { content: "\e027"; }
.glyphicon-inbox:before { content: "\e028"; }
.glyphicon-play-circle:before { content: "\e029"; }
.glyphicon-repeat:before { content: "\e030"; }
.glyphicon-refresh:before { content: "\e031"; }
.glyphicon-list-alt:before { content: "\e032"; }
.glyphicon-lock:before { content: "\e033"; }
.glyphicon-flag:before { content: "\e034"; }
.glyphicon-headphones:before { content: "\e035"; }
.glyphicon-volume-off:before { content: "\e036"; }
.glyphicon-volume-down:before { content: "\e037"; }
.glyphicon-volume-up:before { content: "\e038"; }
.glyphicon-qrcode:before { content: "\e039"; }
.glyphicon-barcode:before { content: "\e040"; }
.glyphicon-tag:before { content: "\e041"; }
.glyphicon-tags:before { content: "\e042"; }
.glyphicon-book:before { content: "\e043"; }
.glyphicon-bookmark:before { content: "\e044"; }
.glyphicon-print:before { content: "\e045"; }
.glyphicon-camera:before { content: "\e046"; }
.glyphicon-font:before { content: "\e047"; }
.glyphicon-bold:before { content: "\e048"; }
.glyphicon-italic:before { content: "\e049"; }
.glyphicon-text-height:before { content: "\e050"; }
.glyphicon-text-width:before { content: "\e051"; }
.glyphicon-align-left:before { content: "\e052"; }
.glyphicon-align-center:before { content: "\e053"; }
.glyphicon-align-right:before { content: "\e054"; }
.glyphicon-align-justify:before { content: "\e055"; }
.glyphicon-list:before { content: "\e056"; }
.glyphicon-indent-left:before { content: "\e057"; }
.glyphicon-indent-right:before { content: "\e058"; }
.glyphicon-facetime-video:before { content: "\e059"; }
.glyphicon-picture:before { content: "\e060"; }
.glyphicon-map-marker:before { content: "\e062"; }
.glyphicon-adjust:before { content: "\e063"; }
.glyphicon-tint:before { content: "\e064"; }
.glyphicon-edit:before { content: "\e065"; }
.glyphicon-share:before { content: "\e066"; }
.glyphicon-check:before { content: "\e067"; }
.glyphicon-move:before { content: "\e068"; }
.glyphicon-step-backward:before { content: "\e069"; }
.glyphicon-fast-backward:before { content: "\e070"; }
.glyphicon-backward:before { content: "\e071"; }
.glyphicon-play:before { content: "\e072"; }
.glyphicon-pause:before { content: "\e073"; }
.glyphicon-stop:before { content: "\e074"; }
.glyphicon-forward:before { content: "\e075"; }
.glyphicon-fast-forward:before { content: "\e076"; }
.glyphicon-step-forward:before { content: "\e077"; }
.glyphicon-eject:before { content: "\e078"; }
.glyphicon-chevron-left:before { content: "\e079"; }
.glyphicon-chevron-right:before { content: "\e080"; }
.glyphicon-plus-sign:before { content: "\e081"; }
.glyphicon-minus-sign:before { content: "\e082"; }
.glyphicon-remove-sign:before { content: "\e083"; }
.glyphicon-ok-sign:before { content: "\e084"; }
.glyphicon-question-sign:before { content: "\e085"; }
.glyphicon-info-sign:before { content: "\e086"; }
.glyphicon-screenshot:before { content: "\e087"; }
.glyphicon-remove-circle:before { content: "\e088"; }
.glyphicon-ok-circle:before { content: "\e089"; }
.glyphicon-ban-circle:before { content: "\e090"; }
.glyphicon-arrow-left:before { content: "\e091"; }
.glyphicon-arrow-right:before { content: "\e092"; }
.glyphicon-arrow-up:before { content: "\e093"; }
.glyphicon-arrow-down:before { content: "\e094"; }
.glyphicon-share-alt:before { content: "\e095"; }
.glyphicon-resize-full:before { content: "\e096"; }
.glyphicon-resize-small:before { content: "\e097"; }
.glyphicon-exclamation-sign:before { content: "\e101"; }
.glyphicon-gift:before { content: "\e102"; }
.glyphicon-leaf:before { content: "\e103"; }
.glyphicon-fire:before { content: "\e104"; }
.glyphicon-eye-open:before { content: "\e105"; }
.glyphicon-eye-close:before { content: "\e106"; }
.glyphicon-warning-sign:before { content: "\e107"; }
.glyphicon-plane:before { content: "\e108"; }
.glyphicon-calendar:before { content: "\e109"; }
.glyphicon-random:before { content: "\e110"; }
.glyphicon-comment:before { content: "\e111"; }
.glyphicon-magnet:before { content: "\e112"; }
.glyphicon-chevron-up:before { content: "\e113"; }
.glyphicon-chevron-down:before { content: "\e114"; }
.glyphicon-retweet:before { content: "\e115"; }
.glyphicon-shopping-cart:before { content: "\e116"; }
.glyphicon-folder-close:before { content: "\e117"; }
.glyphicon-folder-open:before { content: "\e118"; }
.glyphicon-resize-vertical:before { content: "\e119"; }
.glyphicon-resize-horizontal:before { content: "\e120"; }
.glyphicon-hdd:before { content: "\e121"; }
.glyphicon-bullhorn:before { content: "\e122"; }
.glyphicon-bell:before { content: "\e123"; }
.glyphicon-certificate:before { content: "\e124"; }
.glyphicon-thumbs-up:before { content: "\e125"; }
.glyphicon-thumbs-down:before { content: "\e126"; }
.glyphicon-hand-right:before { content: "\e127"; }
.glyphicon-hand-left:before { content: "\e128"; }
.glyphicon-hand-up:before { content: "\e129"; }
.glyphicon-hand-down:before { content: "\e130"; }
.glyphicon-circle-arrow-right:before { content: "\e131"; }
.glyphicon-circle-arrow-left:before { content: "\e132"; }
.glyphicon-circle-arrow-up:before { content: "\e133"; }
.glyphicon-circle-arrow-down:before { content: "\e134"; }
.glyphicon-globe:before { content: "\e135"; }
.glyphicon-wrench:before { content: "\e136"; }
.glyphicon-tasks:before { content: "\e137"; }
.glyphicon-filter:before { content: "\e138"; }
.glyphicon-briefcase:before { content: "\e139"; }
.glyphicon-fullscreen:before { content: "\e140"; }
.glyphicon-dashboard:before { content: "\e141"; }
.glyphicon-paperclip:before { content: "\e142"; }
.glyphicon-heart-empty:before { content: "\e143"; }
.glyphicon-link:before { content: "\e144"; }
.glyphicon-phone:before { content: "\e145"; }
.glyphicon-pushpin:before { content: "\e146"; }
.glyphicon-usd:before { content: "\e148"; }
.glyphicon-gbp:before { content: "\e149"; }
.glyphicon-sort:before { content: "\e150"; }
.glyphicon-sort-by-alphabet:before { content: "\e151"; }
.glyphicon-sort-by-alphabet-alt:before { content: "\e152"; }
.glyphicon-sort-by-order:before { content: "\e153"; }
.glyphicon-sort-by-order-alt:before { content: "\e154"; }
.glyphicon-sort-by-attributes:before { content: "\e155"; }
.glyphicon-sort-by-attributes-alt:before { content: "\e156"; }
.glyphicon-unchecked:before { content: "\e157"; }
.glyphicon-expand:before { content: "\e158"; }
.glyphicon-collapse-down:before { content: "\e159"; }
.glyphicon-collapse-up:before { content: "\e160"; }
.glyphicon-log-in:before { content: "\e161"; }
.glyphicon-flash:before { content: "\e162"; }
.glyphicon-log-out:before { content: "\e163"; }
.glyphicon-new-window:before { content: "\e164"; }
.glyphicon-record:before { content: "\e165"; }
.glyphicon-save:before { content: "\e166"; }
.glyphicon-open:before { content: "\e167"; }
.glyphicon-saved:before { content: "\e168"; }
.glyphicon-import:before { content: "\e169"; }
.glyphicon-export:before { content: "\e170"; }
.glyphicon-send:before { content: "\e171"; }
.glyphicon-floppy-disk:before { content: "\e172"; }
.glyphicon-floppy-saved:before { content: "\e173"; }
.glyphicon-floppy-remove:before { content: "\e174"; }
.glyphicon-floppy-save:before { content: "\e175"; }
.glyphicon-floppy-open:before { content: "\e176"; }
.glyphicon-credit-card:before { content: "\e177"; }
.glyphicon-transfer:before { content: "\e178"; }
.glyphicon-cutlery:before { content: "\e179"; }
.glyphicon-header:before { content: "\e180"; }
.glyphicon-compressed:before { content: "\e181"; }
.glyphicon-earphone:before { content: "\e182"; }
.glyphicon-phone-alt:before { content: "\e183"; }
.glyphicon-tower:before { content: "\e184"; }
.glyphicon-stats:before { content: "\e185"; }
.glyphicon-sd-video:before { content: "\e186"; }
.glyphicon-hd-video:before { content: "\e187"; }
.glyphicon-subtitles:before { content: "\e188"; }
.glyphicon-sound-stereo:before { content: "\e189"; }
.glyphicon-sound-dolby:before { content: "\e190"; }
.glyphicon-sound-5-1:before { content: "\e191"; }
.glyphicon-sound-6-1:before { content: "\e192"; }
.glyphicon-sound-7-1:before { content: "\e193"; }
.glyphicon-copyright-mark:before { content: "\e194"; }
.glyphicon-registration-mark:before { content: "\e195"; }
.glyphicon-cloud-download:before { content: "\e197"; }
.glyphicon-cloud-upload:before { content: "\e198"; }
.glyphicon-tree-conifer:before { content: "\e199"; }
.glyphicon-tree-deciduous:before { content: "\e200"; }
.glyphicon-cd:before { content: "\e201"; }
.glyphicon-save-file:before { content: "\e202"; }
.glyphicon-open-file:before { content: "\e203"; }
.glyphicon-level-up:before { content: "\e204"; }
.glyphicon-copy:before { content: "\e205"; }
.glyphicon-paste:before { content: "\e206"; }
.glyphicon-alert:before { content: "\e209"; }
.glyphicon-equalizer:before { content: "\e210"; }
.glyphicon-king:before { content: "\e211"; }
.glyphicon-queen:before { content: "\e212"; }
.glyphicon-pawn:before { content: "\e213"; }
.glyphicon-bishop:before { content: "\e214"; }
.glyphicon-knight:before { content: "\e215"; }
.glyphicon-baby-formula:before { content: "\e216"; }
.glyphicon-tent:before { content: "\26fa"; }
.glyphicon-blackboard:before { content: "\e218"; }
.glyphicon-bed:before { content: "\e219"; }
.glyphicon-apple:before { content: "\f8ff"; }
.glyphicon-erase:before { content: "\e221"; }
.glyphicon-hourglass:before { content: "\231b"; }
.glyphicon-lamp:before { content: "\e223"; }
.glyphicon-duplicate:before { content: "\e224"; }
.glyphicon-piggy-bank:before { content: "\e225"; }
.glyphicon-scissors:before { content: "\e226"; }
.glyphicon-bitcoin:before,
.glyphicon-btc:before,
.glyphicon-xbt:before { content: "\e227"; }
.glyphicon-yen:before,
.glyphicon-jpy:before { content: "\00a5"; }
.glyphicon-ruble:before,
.glyphicon-rub:before { content: "\20bd"; }
.glyphicon-scale:before { content: "\e230"; }
.glyphicon-ice-lolly:before { content: "\e231"; }
.glyphicon-ice-lolly-tasted:before { content: "\e232"; }
.glyphicon-education:before { content: "\e233"; }
.glyphicon-option-horizontal:before { content: "\e234"; }
.glyphicon-option-vertical:before { content: "\e235"; }
.glyphicon-menu-hamburger:before { content: "\e236"; }
.glyphicon-modal-window:before { content: "\e237"; }
.glyphicon-oil:before { content: "\e238"; }
.glyphicon-grain:before { content: "\e239"; }
.glyphicon-sunglasses:before { content: "\e240"; }
.glyphicon-text-size:before { content: "\e241"; }
.glyphicon-text-color:before { content: "\e242"; }
.glyphicon-text-background:before { content: "\e243"; }
.glyphicon-object-align-top:before { content: "\e244"; }
.glyphicon-object-align-bottom:before { content: "\e245"; }
.glyphicon-object-align-horizontal:before { content: "\e246"; }
.glyphicon-object-align-left:before { content: "\e247"; }
.glyphicon-object-align-vertical:before { content: "\e248"; }
.glyphicon-object-align-right:before { content: "\e249"; }
.glyphicon-triangle-right:before { content: "\e250"; }
.glyphicon-triangle-left:before { content: "\e251"; }
.glyphicon-triangle-bottom:before { content: "\e252"; }
.glyphicon-triangle-top:before { content: "\e253"; }
.glyphicon-console:before { content: "\e254"; }
.glyphicon-superscript:before { content: "\e255"; }
.glyphicon-subscript:before { content: "\e256"; }
.glyphicon-menu-left:before { content: "\e257"; }
.glyphicon-menu-right:before { content: "\e258"; }
.glyphicon-menu-down:before { content: "\e259"; }
.glyphicon-menu-up:before { content: "\e260"; }
.col10main .hbflag.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #e6eaf2;
}
.col10main .hbflag.nav-tabs > li {
    position: relative;
    list-style: none;
}
.col10main .hbflag.nav-tabs > li > a {
    display: block;
    padding: 10px 14px;
    color: #475467;
    text-decoration: none;
    background: #f8fafc;
    border: 1px solid #e6eaf2;
    border-bottom-color: transparent;
    border-radius: 10px 10px 0 0;
    transition: all .2s ease;
}
.col10main .hbflag.nav-tabs > li.active > a,
.col10main .hbflag.nav-tabs > li > a:hover {
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
}
.col10main .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 210px;
    padding: 8px;
    margin: 2px 0 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e6eaf2;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(20, 35, 70, .14);
}
.col10main .dropdown:hover > .dropdown-menu,
.col10main .dropdown.open > .dropdown-menu {
    display: block;
}
.col10main .dropdown-menu > li > a {
    display: block;
    padding: 9px 12px;
    color: #475467;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
}
.col10main .dropdown-menu > li > a:hover {
    color: #667eea;
    background: #f3f5ff;
}
.col10main .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.col10main .panel-success > .panel-heading {
    padding: 0;
    color: #d0d8e8;
    background: linear-gradient(135deg, #1e2235 0%, #1a1e30 100%);
    border-bottom: 1px solid #2a2e40;
    border-radius: 14px 14px 0 0;
}
.col10main .panel-heading blockquote {
    margin: 0;
    padding: 20px 24px;
    border-left: 4px solid #667eea;
}
.col10main .panel-heading blockquote p {
    margin: 0 0 8px;
    color: #e0e6f0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}
.col10main .panel-heading blockquote footer {
    color: #8a90a5;
    font-size: 14px;
    line-height: 1.8;
}
.col10main .panel-heading code {
    padding: 3px 7px;
    color: #e880b0;
    background: #252535;
    border: 1px solid #3a2a40;
    border-radius: 5px;
    font-family: Consolas, Monaco, 'Courier New', monospace;
}
.bs-glyphicons {
    margin: 0 -10px;
    overflow: hidden;
}
.bs-glyphicons-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.bs-glyphicons-list li {
    min-height: 120px;
    padding: 18px 10px 14px;
    color: #a8b0c0;
    text-align: center;
    word-break: break-word;
    background: #1a1e2e;
    border: 1px solid #2a2e40;
    border-radius: 14px;
    transition: all .2s ease;
}
.bs-glyphicons-list li:hover {
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    box-shadow: 0 10px 24px rgba(102, 126, 234, .3);
    transform: translateY(-3px);
}
.bs-glyphicons-list .glyphicon {
    display: block;
    margin: 0 auto 12px;
    color: #7b93e0;
    font-size: 26px;
    line-height: 1;
}
.bs-glyphicons-list li:hover .glyphicon {
    color: #fff;
}
.bs-glyphicons-list .glyphicon-class {
    display: block;
    color: inherit;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
}
@media (max-width: 1200px) {
    .bs-glyphicons-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .bs-glyphicons-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .col10main .hbflag.nav-tabs {
        border-bottom: none;
    }
    .col10main .hbflag.nav-tabs > li,
    .col10main .hbflag.nav-tabs > li > a {
        width: 100%;
        border-radius: 10px;
    }
    .col10main .dropdown-menu {
        position: static;
        width: 100%;
        box-shadow: none;
    }
    .bs-glyphicons-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .bs-glyphicons-list li {
        min-height: 108px;
        padding: 16px 8px 12px;
    }
}
@media (max-width: 420px) {
    .bs-glyphicons-list {
        grid-template-columns: 1fr;
    }
}
.aes-key-group .col-sm-12 {
    display: flex;
    justify-content: center;
}
.aes-key-input {
    max-width: 480px;
    height: 44px;
    padding: 0 16px;
    color: #243b53;
    font-size: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.aes-key-input:focus {
    background: #fff;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}
.aes-key-input::placeholder {
    color: #98a2b3;
}
.aes-btn-group .col-sm-12 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.aes-btn-group .btn {
    min-width: 88px;
    font-size: 14px;
    font-weight: 500;
}
.aes-result-group {
    margin-top: 4px;
}
.aes-result-wrapper {
    border: 1px solid #e6eaf2;
    border-radius: 12px;
    overflow: hidden;
    background: #1e1e2e;
    box-shadow: 0 8px 24px rgba(20, 35, 70, 0.08);
}
.aes-result-pre {
    margin: 0;
    padding: 18px 20px;
    min-height: 120px;
    max-height: 420px;
    overflow-y: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.7;
    color: #e2e8f0;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}
.aes-result-pre code {
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}
.aes-result-pre::-webkit-scrollbar {
    width: 6px;
}
.aes-result-pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
}
.aes-result-pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}
.aes-result-pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}
.aes-btn-group #conv {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: #667eea;
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.28);
}
.aes-btn-group #conv:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4290 100%);
    box-shadow: 0 10px 24px rgba(102, 126, 234, 0.38);
    transform: translateY(-1px);
}
.aes-btn-group #res {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border-color: #22c55e;
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.28);
}
.aes-btn-group #res:hover {
    background: linear-gradient(135deg, #1fb254 0%, #158f3f 100%);
    box-shadow: 0 10px 24px rgba(34, 197, 94, 0.38);
    transform: translateY(-1px);
}
.aes-btn-group #copyallcode {
    border-color: #d1d5db;
}
.aes-btn-group #copyallcode:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}
@media (max-width: 768px) {
    .aes-key-input {
        max-width: 100%;
    }
    .aes-btn-group .btn {
        flex: 1 1 auto;
        min-width: 72px;
        font-size: 13px;
    }
    .aes-result-pre {
        padding: 14px 16px;
        min-height: 100px;
        max-height: 300px;
        font-size: 13px;
    }
}
.pinyin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1e2235 0%, #252a3e 100%);
    border: 1px solid #2d3348;
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
.pinyin-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.pinyin-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #94a3b8;
    font-weight: 500;
    user-select: none;
    transition: color .2s;
}
.pinyin-check:hover { color: #a5b4fc; }
.pinyin-check input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #475569;
    border-radius: 5px;
    background: #2d3348;
    cursor: pointer;
    position: relative;
    transition: all .2s;
    flex-shrink: 0;
    margin: 0;
}
.pinyin-check input[type="checkbox"]:checked {
    background: #6366f1;
    border-color: #6366f1;
}
.pinyin-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pinyin-check input[type="checkbox"]:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
}
.pinyin-select-wrap select {
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    color: #e2e8f0;
    background: #2d3348 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
    border: 2px solid #3b4058;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .2s, box-shadow .2s;
    font-weight: 500;
}
.pinyin-select-wrap select:hover { border-color: #6366f1; }
.pinyin-select-wrap select:focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, .15);
}
.pinyin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.pinyin-actions .btn {
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    transition: all .2s;
    cursor: pointer;
}
.pinyin-actions .btn-success {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, .3);
}
.pinyin-actions .btn-success:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    box-shadow: 0 4px 14px rgba(99, 102, 241, .4);
    transform: translateY(-1px);
}
.pinyin-actions .btn-info {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #fff;
    box-shadow: 0 2px 8px rgba(6, 182, 212, .3);
}
.pinyin-actions .btn-info:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 4px 14px rgba(6, 182, 212, .4);
    transform: translateY(-1px);
}
.pinyin-actions .btn-default {
    background: #2d3348;
    color: #94a3b8;
    border: 2px solid #3b4058 !important;
}
.pinyin-actions .btn-default:hover {
    background: #3b4058;
    border-color: #525773 !important;
    color: #e2e8f0;
}
@media (max-width: 768px) {
    .pinyin-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .pinyin-options {
        flex-direction: column;
        align-items: flex-start;
    }
    .pinyin-actions {
        justify-content: flex-start;
    }
}
.py-tran-result {
    font-size: 20px;
    line-height: 1.35;
    word-wrap: break-word;
}
.py-tran-result:empty {
    display: none;
}
.py-tran-result em {
    display: inline-block;
    text-align: center;
    min-width: 2.8em;
    vertical-align: top;
    font-style: normal;
}
.py-tran-result em i {
    font-style: normal;
    font-size: 14px;
    color: #91949c;
}
.result-area .form-group {
    margin-bottom: 0;
}
.result-area #result-detail {
    font-size: 14px;
    color: #94a3b8;
    margin: 6px 0 4px;
}
.result-area #result-url-display {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}
.result-area #result-url-display a {
    color: #60a5fa;
}
.result-area #result-url-display a:hover {
    color: #93bbfd;
}
.result-area a {
    color: #60a5fa;
}
.result-area a:hover {
    color: #93bbfd;
}
.table-dark-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
    color: #e2e8f0;
}
.table-dark-table caption {
    font-size: 16px;
    font-weight: bold;
    color: #f1f5f9;
    padding: 10px 0 8px;
    text-align: left;
    border-bottom: 2px solid #334155;
    margin-bottom: 8px;
    caption-side: top;
}
.table-dark-table td {
    padding: 10px 14px;
    border: 1px solid #1e293b;
    vertical-align: middle;
}
.table-dark-table tr td:first-child {
    background: #1e293b;
    color: #94a3b8;
    font-weight: 500;
}
.table-dark-table tr:hover td {
    background: #1e293b;
}
.table-dark-table tr:hover td:first-child {
    background: #334155;
}
.result-area-gzip .result-card {
    text-align: center;
    padding: 30px 20px;
    background: #1e293b;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #334155;
}
.result-area-gzip #result-icon {
    font-size: 64px;
    text-align: center;
    display: block;
    margin-bottom: 10px;
}
.result-area-gzip #result-status {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}
.result-area-gzip #result-detail {
    text-align: center;
    color: #94a3b8;
    margin-top: 6px;
}
.result-area-gzip #result-url-display {
    text-align: center;
    margin-top: 8px;
    font-size: 13px;
    word-break: break-all;
    color: #64748b;
}
.result-area-gzip #result-url-display a,
.result-area-gzip #result-url-display a:visited {
    color: #60a5fa;
}
.result-area-gzip #result-url-display a:hover {
    color: #93bbfd;
}
.result-area-gzip .section-title {
    font-size: 16px;
    font-weight: bold;
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #334155;
    color: #f1f5f9;
}
.result-area-gzip .info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    color: #e2e8f0;
}
.result-area-gzip .info-table th,
.result-area-gzip .info-table td {
    padding: 10px 14px;
    border: 1px solid #1e293b;
    text-align: left;
}
.result-area-gzip .info-table th {
    background: #1e293b;
    font-weight: 600;
    width: 150px;
    color: #94a3b8;
}

.result-area {
    background: #0f172a;
    border-radius: 12px;
    padding: 48px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
    color: #e2e8f0;
}
.result-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    width: 100%;
}
.input-group .form-control {
    display: table-cell;
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}
.input-group-btn {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    font-size: 0;
}
.input-group-btn > .btn {
    position: relative;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}
.form-control {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #111622;
    background-image: none;
    border: 1px solid #111622;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}
textarea.form-control {
    resize: vertical;
}
.btn {
    display: inline-block;
    padding: 8px 16px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: all 0.2s;
}
.btn-default {
    color: #ddd;
    background-color: #111622;
    border-color: #111622;
}
.btn-default:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}
.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}
.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}
.alert {
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    border-radius: 8px;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.mb5 {
    margin-bottom: 5px;
}
.panel {
    margin-bottom: 20px;
    background-color: #23283c;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.panel-default {
    border-color: #ddd;
}
.panel-success {
    border-color: #c3e6cb;
}
.panel-success > .panel-heading {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.panel-body {
    padding: 18px;
}
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: 0px;
    margin-left: 0px;
}
.col-md-12,
.col-sm-12,
.col-sm-10,
.col-sm-6,
.col-sm-2 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 0px;
    padding-left: 0px;
}
.col-md-12,
.col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
}
.col-sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}
.col-sm-6 {
    flex: 0 0 50%;
    max-width: 100%;
}
.col-sm-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
.col10main {
    width: 100%;
}
.accordion,
.accordion-group {
    width: 100%;
}
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
}
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
    background-color: #fff;
    color: #333;
    font-size: 14px;
}
.table th,
.table td {
    padding: 11px 14px;
    line-height: 1.6;
    vertical-align: middle;
    border-top: 1px solid #e8edf3;
}
.table-bordered {
    border: 1px solid #e8edf3;
}
.table-bordered th,
.table-bordered td {
    border: 1px solid #e8edf3;
}
.table th {
    font-weight: 700;
    color: #243b53;
    background: #f3f7fb;
    white-space: nowrap;
}
.table-striped tbody tr:nth-child(odd) {
    background-color: #fbfdff;
}
.table-hover tbody tr:hover {
    background-color: #eef5ff;
}
.table td:first-child,
.table td:nth-child(2) {
    font-family: Consolas, Monaco, monospace;
    color: #1f5fbf;
    white-space: nowrap;
}
.alert code {
    margin-left: 4px;
    padding: 2px 8px;
    color: #9acc9a;
    background: rgba(0, 0, 0, .3);
    border-radius: 4px;
    font-family: Consolas, Monaco, monospace;
    white-space: nowrap;
}
.label {
    display: inline-block;
    padding: .25em .6em;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}
.label-success {
    background-color: #28a745;
}
.label-danger {
    background-color: #dc3545;
}
.label-info {
    background-color: #17a2b8;
}
.label-primary {
    background-color: #667eea;
}
@media (max-width: 768px) {
    .row {
        margin-right: 0;
        margin-left: 0;
    }
    .col-md-12,
    .col-sm-12,
    .col-sm-10,
    .col-sm-6,
    .col-sm-2 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
    .table {
        font-size: 13px;
    }
    .table th,
    .table td {
        padding: 9px 10px;
    }
    .alert code {
        margin-left: 2px;
    }
}
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    border-radius: 8px;
    padding: 9px 20px;
    font-weight: 500;
    letter-spacing: 0.3px;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.25);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4290 100%);
    border-color: #5a6fd6;
    color: #fff;
    box-shadow: 0 10px 24px rgba(102, 126, 234, 0.35);
    transform: translateY(-1px);
}
.tool-form {
    padding: 24px;
    background: rgba(15, 20, 35, 0.5);
    border: 1px solid rgba(102, 126, 234, 0.1);
    border-radius: 14px;
    margin-bottom: 20px;
}
.tool-form .form-group {
    margin-bottom: 14px;
}
.tool-form .form-group:last-child {
    margin-bottom: 0;
}
.tool-btn-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
}
.tool-output {
    margin-top: 14px;
}
.tool-output pre {
    margin: 0;
    padding: 16px;
    background: rgba(10, 14, 23, 0.7);
    border: 1px solid rgba(102, 126, 234, 0.12);
    border-radius: 10px;
    overflow-x: auto;
    min-height: 80px;
    max-height: 500px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
.tool-output code {
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.65;
    color: #c8d6e5;
    white-space: pre-wrap;
    word-break: break-all;
}
.dark-table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
    background-color: transparent;
    color: #c8d6e5;
    font-size: 14px;
}
.dark-table th,
.dark-table td,
.dark-table td:first-child,
.dark-table td:nth-child(2) {
    padding: 10px 12px;
    line-height: 1.6;
    vertical-align: middle;
    border: 1px solid rgba(102, 126, 234, 0.12);
    color: #c8d6e5;
    font-family: inherit;
}
.dark-table thead th,
.dark-table th {
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(15, 20, 35, 0.7);
    border-bottom: 2px solid rgba(102, 126, 234, 0.2);
    white-space: nowrap;
}
.dark-table tbody tr {
    background: rgba(10, 14, 23, 0.45);
    transition: background 0.2s ease;
}
.dark-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.92);
}
.dark-table tbody tr:hover td,
.dark-table tbody tr:hover th {
    color: #1a1a2e;
}
.ua-list .list-group-item {
    background: rgba(10, 14, 23, 0.45);
    border: 1px solid rgba(102, 126, 234, 0.1);
    color: #c8d6e5;
    padding: 10px 14px;
    list-style: none;
}
.ua-list .list-group {
    list-style: none;
    padding-left: 0;
}
.ua-list .list-group-item-info {
    background: rgba(15, 20, 35, 0.8);
    border-color: rgba(102, 126, 234, 0.2);
    color: #a78bfa;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 16px;
}
.ua-list .input-group {
    width: 100%;
}
.ua-list .input-group-addon {
    min-width: 140px;
    background: rgba(15, 20, 35, 0.7);
    border: 1px solid rgba(102, 126, 234, 0.15);
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
}
.ua-list .form-control {
    background: rgba(10, 14, 23, 0.6);
    border-color: rgba(102, 126, 234, 0.12);
    color: #a5d6ff;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
}
.dark-table tbody tr:nth-child(odd),
.dark-table tbody tr:nth-child(even) {
    background: rgba(10, 14, 23, 0.45);
}
.dark-table tbody tr:nth-child(odd):hover,
.dark-table tbody tr:nth-child(even):hover {
    background: rgba(255, 255, 255, 0.92);
}
/* 图片搜索瀑布流 */
.waterfall { column-count: 4; column-gap: 12px; margin-top: 16px; }
.waterfall .img-item { break-inside: avoid; margin-bottom: 12px; background: rgba(15,20,35,0.5); border: 1px solid rgba(102,126,234,0.1); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all .25s; display: block; }
.waterfall .img-item:hover { border-color: rgba(102,126,234,0.35); box-shadow: 0 8px 24px rgba(102,126,234,0.12); transform: translateY(-3px); }
.waterfall .img-item img { width: 100%; display: block; background: rgba(10,14,23,0.6); }
.waterfall .img-info { padding: 6px 10px; }
.waterfall .img-info span { font-size: 12px; color: #64748b; }
.lightbox-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); justify-content: center; align-items: center; cursor: pointer; }
.lightbox-overlay.show { display: flex; }
.lightbox-close { position: absolute; top: 20px; right: 28px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 22px; cursor: pointer; transition: all .2s; line-height: 38px; text-align: center; }
.lightbox-close:hover { background: rgba(255,255,255,0.25); }
@media (max-width: 992px) { .waterfall { column-count: 3; } }
@media (max-width: 768px) { .waterfall { column-count: 2; column-gap: 8px; } .waterfall .img-item { margin-bottom: 8px; } }
@media (max-width: 480px) { .waterfall { column-count: 2; } }

.lightbox-dl:hover { background: rgba(118,75,162,0.9); box-shadow: 0 4px 16px rgba(102,126,234,0.4); }
.lightbox-wrap { position: relative; display: inline-block; }
.lightbox-wrap img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); object-fit: contain; display: block; }
.lightbox-dl { display: block; margin: 10px auto 0; padding: 8px 22px; background: rgba(102,126,234,0.85); color: #fff; border-radius: 8px; font-size: 14px; text-decoration: none; cursor: pointer; transition: all .25s; text-align: center; max-width: 120px; }
.lightbox-dl:hover { background: rgba(118,75,162,0.9); box-shadow: 0 4px 16px rgba(102,126,234,0.4); }
.lightbox-wrap .lightbox-dl { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 20px; background: rgba(0,0,0,0.65); color: #fff; border-radius: 6px; font-size: 14px; text-decoration: none; cursor: pointer; transition: all .25s; z-index: 10; }
.lightbox-wrap .lightbox-dl:hover { background: rgba(102,126,234,0.85); }
.CodeMirror { background: rgba(10,14,23,0.85) !important; border: 1px solid rgba(102,126,234,0.15) !important; border-radius: 10px; color: #c8d6e5 !important; font-family: 'Fira Code','Consolas',monospace; }
.CodeMirror-gutters { background: rgba(10,14,23,0.95) !important; border-right: 1px solid rgba(102,126,234,0.1) !important; }
.CodeMirror-linenumber { color: #475569 !important; }
.CodeMirror-cursor { border-left-color: #a78bfa !important; }
.CodeMirror-selected { background: rgba(102,126,234,0.25) !important; }
.CodeMirror-line::selection { background: rgba(102,126,234,0.25) !important; }
.cm-s-default .cm-keyword { color: #c084fc; }
.cm-s-default .cm-def { color: #60a5fa; }
.cm-s-default .cm-string { color: #4ade80; }
.cm-s-default .cm-number { color: #fbbf24; }
.cm-s-default .cm-comment { color: #64748b; font-style: italic; }
.cm-s-default .cm-operator { color: #94a3b8; }
.cm-s-default .cm-variable { color: #e2e8f0; }
.cm-s-default .cm-builtin { color: #f472b6; }
.CodeMirror-matchingbracket { outline: 1px solid #a78bfa; color: #a78bfa !important; }
.CodeMirror-activeline-background { background: rgba(102,126,234,0.06); }
.NetWorkWrap { background: transparent; }
.NetWork-main01 { background: rgba(15,20,35,0.45); border: 1px solid rgba(102,126,234,0.1); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.NetWork-main01 .MainHead { font-size: 15px; font-weight: 700; color: #e2e8f0; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(102,126,234,0.15); }
.NetWork-main01 .MainCent { color: #c8d6e5; }
.MCentlist { padding: 10px 0; }
.MCentlist label { color: #94a3b8; font-size: 13px; display: inline-block; }
.Intxt { padding: 8px 10px; background: rgba(10,14,23,0.7); border: 1px solid rgba(102,126,234,0.15); border-radius: 6px; color: #c8d6e5; font-size: 14px; outline: none; width: 48px; text-align: center; margin: 0 2px; font-family: 'Fira Code','Consolas',monospace; }
.Intxt:focus { border-color: rgba(102,126,234,0.4); }
.Intxt[readonly] { background: rgba(10,14,23,0.4); color: #94a3b8; }
.Inbtn { padding: 8px 16px; background: linear-gradient(135deg, #667eea, #764ba2); border: none; border-radius: 8px; color: #fff; font-size: 13px; cursor: pointer; font-weight: 500; transition: all .2s; margin: 0 2px; }
.Inbtn:hover { box-shadow: 0 4px 14px rgba(102,126,234,0.35); transform: translateY(-1px); }
.bg-blue02 { background: rgba(10,14,23,0.5) !important; }
.bb-blue { border-bottom-color: rgba(102,126,234,0.15) !important; }
.bor-a1s { border-color: rgba(102,126,234,0.1) !important; }
.bor-t1s { border-top-color: rgba(102,126,234,0.1) !important; }
.col-gray04, .col-gray02 { color: #64748b !important; }
.col-blue02 { color: #a78bfa !important; }
.w60 { width: 60px; } .w70 { width: 70px; } .w80 { width: 80px; } .w82 { width: 82px; } .w100 { width: 100px; } .w110 { width: 110px; }
.tr { text-align: right; }
.pt10 { padding-top: 10px; } .ptb10 { padding: 10px 0; }
.mt10 { margin-top: 10px; } .mt20 { margin-top: 20px; }
.ml10 { margin-left: 10px; } .mr15 { margin-right: 15px; } .pr10 { padding-right: 10px; } .pr5 { padding-right: 5px; }
.NetWork-choese { position: relative; display: inline-block; }
.NetWorkW-choese .NetWorkW-cont { padding: 8px 28px 8px 10px; background: rgba(10,14,23,0.7); border: 1px solid rgba(102,126,234,0.15); border-radius: 6px; color: #c8d6e5; font-size: 13px; cursor: pointer; min-width: 60px; }
.NWicon-drop-down { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #64748b; }
.NetWorkC-down { display: none; position: absolute; z-index: 99; top: 100%; left: 0; background: rgba(15,20,35,0.98); border: 1px solid rgba(102,126,234,0.2); border-radius: 8px; max-height: 240px; overflow-y: auto; list-style: none; padding: 4px; margin: 2px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.NetWorkW-choese .NetWorkC-down.show { display: block; }
.NetWorkC-down li { padding: 0; }
.NetWorkC-down li a { display: block; padding: 6px 12px; color: #94a3b8; text-decoration: none; font-size: 13px; border-radius: 4px; transition: all .15s; }
.NetWorkC-down li a:hover { background: rgba(102,126,234,0.15); color: #a78bfa; }
.NetWorkC-down li a[val] { cursor: pointer; }
.ObtainList { background: rgba(15,20,35,0.5); border: 1px solid rgba(102,126,234,0.1); border-radius: 10px; padding: 14px; margin-top: 12px; }
.ObtainList h4 { color: #a78bfa; font-size: 14px; }
.ObtainList table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ObtainList th, .ObtainList td { padding: 8px 10px; border: 1px solid rgba(102,126,234,0.1); color: #c8d6e5; font-size: 13px; text-align: center; }
.ObtainList th { background: rgba(15,20,35,0.7); color: #e2e8f0; font-weight: 600; }
.ObtLClose { color: #64748b; text-decoration: none; font-size: 18px; float: right; }
.ObtLClose:hover { color: #a78bfa; }
.autohide { display: none; }
.fl { float: left; } .fr { float: right; }
.clearfix::after { content: ''; display: table; clear: both; }
.pr { position: relative; }
.lh24 { line-height: 24px; } .lh30 { line-height: 30px; }
.fwnone { font-weight: normal; }
.bb-blue { border-bottom: 1px solid rgba(102,126,234,0.15) !important; }
@media (max-width: 768px) {
    .NetWork-left, .NetWork-right { float: none; width: 100% !important; }
    .Intxt { width: 42px; font-size: 12px; }
    .Inbtn { padding: 7px 12px; font-size: 12px; }
    .NetWorkW-choese .NetWorkW-cont { font-size: 12px; }
    .MCentlist label { font-size: 12px; width: 50px !important; }
}
.NetWork-left, .NetWork-right { float: none; width: 100% !important; }
.input-group .form-control { display: table-cell !important; float: none !important; width: 100%; }
.input-group { width: auto; display: table !important; }
.input-group-addon { display: table-cell !important; width: 1% !important; white-space: nowrap; }
#anjian_test { display: flex; gap: 12px; align-items: flex-start; }
#anjian_test_zuo { flex: 1; }
#anjian_test_you { flex-shrink: 0; }
.anjian-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 38px; height: 46px; padding: 4px 8px; margin: 2px; background: rgba(15,20,35,0.8); border: 1px solid rgba(102,126,234,0.2); border-radius: 8px; color: #c8d6e5; font-size: 12px; text-align: center; cursor: pointer; transition: all .15s; line-height: 1.3; box-shadow: 0 2px 4px rgba(0,0,0,0.3); user-select: none; vertical-align: bottom; gap: 0; }
.anjian-btn:hover { background: rgba(102,126,234,0.2); border-color: rgba(167,139,250,0.5); color: #e2e8f0; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(102,126,234,0.2); }
.anjian-btn:active { background: rgba(102,126,234,0.35); transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.anjian-split { display: inline-block; min-width: 8px; }
.anjian-btn[size] { width: auto !important; }
@media (max-width: 768px) { .anjian-btn { min-width: 32px; height: 40px; font-size: 10px; padding: 3px 5px; } }
.kb-row { height: 0; clear: both; }
.kb-wide { min-width: 60px; }

/* ===== Java Formatter Dark Theme ===== */
.format-java-wrap textarea.form-control,
.format-java-wrap .java-indent-select {
    background: #0f172a;
    border: 1px solid #334155;
    color: #e2e8f0;
    font-size: 14px;
    border-radius: 10px;
    transition: border-color .2s, box-shadow .2s;
}
.format-java-wrap textarea.form-control:focus,
.format-java-wrap .java-indent-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}
.format-java-wrap textarea.form-control::placeholder {
    color: #475569;
}
.format-java-wrap .java-indent-select {
    width: auto;
    min-width: 140px;
    padding: 8px 32px 8px 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.format-java-wrap .java-indent-select:hover {
    border-color: #6366f1;
}
.format-java-wrap .java-indent-select option {
    background: #1e293b;
    color: #e2e8f0;
}
.format-java-wrap .java-indent-arrow {
    display: none;
}

/* ===== Layer 弹窗深色皮肤 ===== */
.layui-layer-dark,
.layui-layer.layui-layer-dark {
    background-color: #1a2235 !important;
    border: 1px solid rgba(102,126,234,0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(102,126,234,0.15) !important;
}
.layui-layer-dark .layui-layer-title {
    height: 46px;
    line-height: 46px;
    padding: 0 18px;
    background: linear-gradient(180deg, #1e293b 0%, #1a2235 100%);
    color: #e2e8f0;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid rgba(102,126,234,0.12);
}
.layui-layer-dark .layui-layer-content {
    padding: 18px 20px;
    background: #1a2235;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.7;
}
.layui-layer-dark.layui-layer-msg {
    border: 1px solid rgba(102,126,234,0.2) !important;
    background: #1a2235 !important;
    color: #e2e8f0 !important;
}
.layui-layer-dark.layui-layer-msg .layui-layer-content {
    padding: 12px 24px 12px 50px;
    background: transparent;
    color: #e2e8f0;
}
.layui-layer-dark .layui-layer-btn {
    padding: 12px 18px 16px;
    background: #1a2235;
    border-top: 1px solid rgba(102,126,234,0.08);
}
.layui-layer-dark .layui-layer-btn a {
    height: 34px;
    line-height: 34px;
    padding: 0 20px;
    margin: 0 5px;
    background: rgba(102,126,234,0.15);
    border: 1px solid rgba(102,126,234,0.25);
    border-radius: 8px;
    color: #a5b4fc;
    font-size: 13px;
}
.layui-layer-dark .layui-layer-btn .layui-layer-btn0 {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.layui-layer-dark .layui-layer-setwin .layui-layer-ico {
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
}