/* 功能栏样式 */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 均匀分布*/
    row-gap: 5px; /* 缩小行间距 */
    column-gap: 1px; /* 缩小列间距 */
    padding: 5px;  /* 内边距 */
    margin: 15px 0;
    list-style: none;
    background-color: #f8f8f8;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.breadcrumb li {
    display: inline-block;
    margin: 0; /* 去除默认的上下外边距 */
    font-size: 14px;
    width: calc(33.333% - 1px); /* 每个元素占三分之一宽度，减去间距 */
    white-space: nowrap; /* 不允许换行 */
    overflow-x: auto; /* 允许水平滚动 */
    padding: 10px 0; /* 添加内边距 */   
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
    border-radius: 4px;
    text-align: left; /* 文字居左 */
}
.breadcrumb li a {

    color: #2196F3;
    
}

.breadcrumb li a:hover {
    color: #0d47a1;
    text-decoration: underline;
}

/* 激活状态的菜单项 */
.breadcrumb li a.active {
    background-color: #eaeaea; /* 激活状态的背景颜色 */
    color: black; /* 激活状态的文字颜色 */
    padding: 0; /* 内边距 */
    display: inline-block; /* 使背景只包裹文字内容 */
}


/*  ⏰下拉菜单栏⏰ */
.breadcrumb .subb {
    display: none;
    position: absolute;
   /*  right: 15px; 调整下拉框的右侧位置,不设置默认正下面 */
    /*width: 200px;  根据需要调整宽度,不设置包裹内容 */
    padding: 10px 0;
    background: #fff;
    border: 1px solid #d4d4d4;
    z-index: 1000; /* 确保下拉框显示在其他元素之上 */
    max-height: 200px; /* 设置最大高度 */
    overflow-y: auto; /* 超出高度时允许滚动 */
    
}

.breadcrumb li:hover .subb {
    display: block;
}

.breadcrumb .subb a {
    display: block; /* 每个链接占据一行 */
    line-height: 25px; /* 调整行高以适应内容 */
    padding: 5px 10px; /* 添加内边距，使链接看起来更美观 */
    text-decoration: none; /* 去掉下划线 */
    white-space: nowrap; /* 防止链接内容换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 在超出部分显示省略号 */
    white-space: nowrap; /* 添加此属性，确保内容单行显示 */
}

.breadcrumb .subb a:hover {
    background: #d4d4d4;
}

textarea {
    width: 100%;
    height: 200px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    padding: 10px;
    box-sizing: border-box;
}

#inputText {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
}

#outputText {
    background-color: #000;
    color: #00ff00;
    border: 1px solid #444;
    margin-bottom: 80px;
}
    
.controls-row {
    display: flex;
    gap: 10px;
    margin: 15px 0;
    align-items: center;
}

select {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
}

button:hover {
    opacity: 0.85;
}

.format-btn {
    background: #4CAF50;
    color: white;
}

.compress-btn {
    background: #2196F3;
    color: white;
}

.urlencode-btn {
    background: #E58FC1;
    color: white;
}

.urldecode-btn {
    background: #7C4DFF;
    color: white;
}

.encode-btn {
    background: #FF9800;
    color: white;
}

.decode-btn {
    background: #9C27B0;
    color: white;
}

.punycode-encode-btn {
    background: #A21B17;
    color: white;
}

.punycode-decode-btn {
    background: #022B6D;
    color: white;
}

.unicode-encode-btn {
    background: #FF7900;
    color: white;
}

.unicode-decode-btn {
    background: #C564FB;
    color: white;
}

.gzipencode-btn {
    background: #00BCD4;
    color: white;
}

.gzipdecode-btn {
    background: #C431B4;
    color: white;
}

.hexencode-btn {
    background: #00E676;
    color: white;
}

.hexdecode-btn {
    background: #FF6F00;
    color: white;
}

.copy-btn {
    background: #009688;
    color: white;
}

.clear-btn {
    background: #F44336;
    color: white;
}

.swap-btn {
    background: #9C27B0;
    color: white;
}

.error {
    color: #ff4444;
    margin-top: 10px;
    font-size: 14px; /* 确保字体大小合适 */
    font-weight: bold;
}