/* 全域設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', 'Arial', 'Noto Sans TC', sans-serif;
    font-size: 16px;
}

/* 主體樣式 */
body {
    background-color: #F5F5F4;
    color: #1f2937;
    line-height: 1.6rem;
    font-size: 1.6rem;
    transition: none;
}

/* 連結樣式 */
a {
    font-size: 1em;
    text-decoration: none;
    color: #323338;
    transition: color 0.3s ease;
}

a:visited {
    color: #323338;
}

/* 頁首樣式 */
header {
    background: linear-gradient(135deg, #6b4e31, #4b3a25);
    color: #fff;
    padding: 1rem 2rem;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.header-top {
    display: grid;
    grid-template-columns: auto 1fr auto; /* 左中右三欄 */
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.header-top h1 {
    margin-right: 1rem;
    font-size: 2.25rem;
    margin: 0;
    display: flex;
    align-items: center;
}

.header-top h1>i {
    margin-right: 0.5rem;
}

.header-top h1 a {
    color: #fff !important;
    text-decoration: none;
    transition: none;
}

.header-top h1 a:hover {
    color: #fff !important;
}

.header-top h1 a i {
    color: #fff !important;
    margin-right: 0.5rem;
}

.web_Name {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.web_logo {
    width: 160px;
    height: 60px;
    background: url("/images/softking_logo.png") no-repeat center center;
    background-size: contain;
    margin-bottom: 8px;
}

/* 作業系統選單 */
.os-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.os-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.os-menu a:hover {
    color: #3b82f6;
}

.os-menu a>i {
    margin-right: 0.5rem;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.web_Name {
    flex: 0 0 auto; /* 靠左固定 */
}

.right-col {
    display: flex;
    flex: 1;
    justify-content: space-between; /* 右欄分成兩邊 */
    align-items: center;
    gap: 1rem;
}

.search-container {
    flex: 1;            /* 撐滿中間空間 */
    width: 100%;         /* 保證寬度可增減 */
    display: block;      /* 移除 flex */
    text-align: center;  /* 讓內層置中 */
}

/* 搜尋欄 */
.search-wrapper {
	position: relative;
    margin-top: 1rem;
    display: inline-block; /* 讓內層可置中 */
    width: 100%;           /* 可自行調整寬度 */
    max-width: 880px;       /* 桌面最大寬度 */
}

.os-menu {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end; /* 靠右 */
}

#FavoriteList, #My-history {
    display: none;
    color: #f3cf6a;
    cursor: pointer;
}

#My-download {
    display: none;
    color: #cc0000;
    cursor: pointer;
    padding-right: 1rem;
}

/* 底部導航列 */
.bottom-nav {
    width: 100%;
    background: linear-gradient(135deg, #6b4e31, #4b3a25);
    padding: 0.5rem 0;
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
}

.bottom-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.bottom-nav a:hover {
    color: #3b82f6;
}

.bottom-nav a>i,
.card_textline_block a>i {
    margin-right: 0.5rem;
}

/* 漢堡選單 */
.hamburger {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 30px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1000;
    align-items: center;
}

.hamburger>i {
    font-size: 1.5rem;
    color: #e0d1b9;
}

/* 導航列 */
nav {
    background-color: #e0d1b9;
    padding: 0.5rem;
    transition: transform 0.3s ease;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
	padding: 0;
}

nav a {
    color: #4b5563;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #3b82f6;
}

/* 下拉選單 */
.dropdown {
    position: relative;
}

.dropdown>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    z-index: 1;
    top: 100%;
    left: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.dropdown:hover .dropdown-content,
.dropdown.open .dropdown-content {
    display: block;
    height: auto;
    opacity: 1;
}

.dropdown-content a {
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    color: #4b5563;
    display: flex;
    align-items: center;
}

.dropdown-content a:hover {
    background-color: #f8fafc;
    color: #3b82f6;
}

/* 導航底部選單 */
.nav-bottom-nav {
    display: none;
    background: linear-gradient(135deg, #6b4e31, #4b3a25);
    padding: 0.5rem;
    margin-top: 0;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
}

.nav-bottom-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
    padding: 0.5rem;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

.nav-bottom-nav a:hover {
    color: #3b82f6;
}

.nav-bottom-nav a>i {
    margin-right: 0.5rem;
}

#search-input {
	height: 50px;
    width: 100%;
	color: #374151;
    padding: 0.25rem 2.5rem 0.25rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1.15rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: rgba(255, 255, 255, 0.9);
}

#search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.search-icon {
    position: absolute;
	right: 0.5rem;
    top: 30%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 2rem;
    height: 2rem;
}

.search-icon > i {
    font-size: 1.2rem;
    color: #4b5563;
}

#search-error {
    display: inline;
    color: #fff;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    opacity: 0;
    text-align: left;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

#search-error.visible {
    opacity: 1;
    max-height: 50px;
}

input::placeholder {
    font-size: 1rem;       /* 設定字型大小 */
    color: #888;           /* 設定顏色 */
    font-style: italic;    /* 可選，斜體 */
    font-weight: normal;   /* 可選 */
}

/* 如果有多種瀏覽器前綴，也可加 */
input::-webkit-input-placeholder { /* Chrome, Safari */
    font-size: 1rem;
    color: #888;
}
input::-moz-placeholder { /* Firefox 19+ */
    font-size: 14px;
    color: #888;
}
input:-ms-input-placeholder { /* IE 10+ */
    font-size: 14px;
    color: #888;
}
input::-ms-input-placeholder { /* Edge */
    font-size: 14px;
    color: #888;
}


/* 主內容與側邊欄容器 */
.container {
    max-width: min(1600px, 100% - 2rem);
    margin: 2rem auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 65% 31.7%;
    gap: 2rem;
    clear: both;
    overflow: hidden;
}
.container.soft_category {
    grid-template-columns: none;
    gap: 0;
}
.soft_category h1 {
	text-align: center;
    margin: 1rem;
    font-size: 2rem;
}

.download-container {
    max-width: min(1500px, 100% - 2rem);
    margin: 2rem auto;
    padding: 0 1rem;
    display: block;
    clear: both;
    overflow: hidden;
}

/* 主內容區域 */
.main-content {
    display: inline-block;
    grid-template-rows: repeat(11, minmax(0, auto));
    gap: 1.5rem;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

/* 側邊欄 */
.sidebar {
    display: grid;
    grid-template-rows: repeat(2, auto);
    /* gap: 1.5rem; */
    align-self: start;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

.right_sidebar {
    margin-bottom: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

/* 卡片樣式 */
.main-content .card,
.one-card-block .card {
    background-color: #fff;
    border-radius: 0.75rem;
    padding: 1rem;
	margin-bottom: 2rem;
    display: grid;
    grid-template-columns: 4fr 6fr;
    grid-template-rows: auto auto 1fr auto;
    gap: 1rem;
    align-items: start;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

.main-content .card:hover,
.one-card-block .card:hover,
.sidebar .card:hover,
.right_sidebar .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.main-content .card h3,
.one-card-block .card h3,
.right_sidebar .card h3 {
    font-size: 1.25rem;
    color: #323338;
    margin-bottom: 0.5rem;
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    word-break: break-word;
}

.main-content .card p,
.one-card-block .card p {
    color: #374151;
    font-size: 0.95rem;
    align-self: start;
    grid-column: 2 / -1;
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto;
}

.one-card-block .card .software-icon,
.right_sidebar .card .software-icon {
    width: 100%;
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    border: 1px solid #BBB;
    object-fit: cover;
    margin-bottom: 0.75rem;
    box-sizing: border-box;
    grid-column: 1 / 2;
    grid-row: 2;
}

.one-card-block .card section {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 2 / -1;
    grid-row: 2 / 4;
}

.one-card-block .card .card-bottom {
    grid-column: 1 / -1;
    grid-row: 4;
    overflow: hidden;
    flex-wrap: wrap;
}

.one-card-block .card.no-image {
    grid-template-columns: 1fr !important;
}

/* 雙卡片區塊 */
.two-card-block {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.two-card-block .card,
.two-card-block .software-card {
    flex: 1 1 0;
}

.two-card-block .card h2 {
    font-size: 1.5rem;
    color: #1e3a8a;
    margin-bottom: 0.5rem;
    word-break: normal;
    width: 100% !important;
    flex: 0 0 auto;
    height: 1.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.two-card-block .card h3,
.right_sidebar .card h3 {
    height: 3.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.two-card-block .card .software-icon {
    flex: 0 0 auto;
}

.two-card-block .card p {
    color: #374151;
    font-size: 1rem;
    max-height: 200px;
    overflow: hidden;
    flex: 1 1 auto;
}

.two-card-block .card section {
    max-height: 212px;
    overflow: hidden;
}

/* 右側邊欄卡片 */
.right_sidebar .card {
    flex: 1 1 0;
    margin-bottom: 1rem;
    background-color: #fff;
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* 文字行區塊 */
.card_textline_block {
    background-color: #fff;
    border-radius: 0.75rem;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 2rem;
}

.card_textline_block:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.card_textline_block h2 {
    font-size: 1.5rem;
    color: #323338;
    margin-bottom: 0.5rem;
    word-break: normal;
    width: 100% !important;
}

.card_textline_block h3 {
    font-size: 1.25rem;
    color: #323338;
    margin-bottom: 0.5rem;
    width: 100% !important;
}

.card_textline_block p {
    color: #374151;
    font-size: 0.95rem;
}

.card_textline_block li a {
    color: #374151;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.card_textline_block li a:hover {
    color: #3b82f6;
}

/* 卡片底部 */
.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap;
    min-height: 1.5rem;
    overflow: hidden;
    margin-top: auto;
}

.card-bottom .left {
    color: #4b5563;
    font-size: 0.85rem;
    white-space: nowrap;
    padding-right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-bottom .right {
    color: #4b5563;
    font-size: 0.85rem;
    white-space: nowrap;
    padding-left: 0.5rem;
}

/* 檔案類型標籤 */
.filetype {
    color: #ffffff;
    border-radius: 9999px;
    font-weight: 700;
    line-height: 1.1em;
    padding: 3px 6px;
    text-align: center;
    font-size: 1.1em;
}

.freeware {
    background-color: #217d68;
}

.shareware {
    background-color: #cc0000;
}

.opensource {
    background-color: #539532;
}

.MultiLanguage,
.zh-TW,
.zh-CN {
    background-color: #0088ff;
}

.ja-JP {
    background-color: #d97e09;
}

.ko-KR {
    background-color: #45a2c4;
}

.en-US {
    background-color: #e74d36;
}

.sys_lang_1, .sys_lang_2, .sys_lang_3 {
    background: #0088ff none repeat scroll 0 0;
}

.sys_lang_4 {
    background: #d467e6 none repeat scroll 0 0;
}

/* 標題與推薦標籤 */
.headlines {
    color: #cc0000;
    margin: 0 0.5em 0 0;
    font-size: 1.5rem;
}

.limit_free {
    color: #0088ff;
    margin: 0 0.5em 0 0;
    font-size: 1.5rem;
}

.recommend {
    color: #ff6700;
    margin: 0 0.5em 0 0;
    font-size: 1.5rem;
}

.computer_in {
    color: #388e3c;
    margin: 0 0.5em 0 0;
    font-size: 1.5rem;
}

.arrow_recomd i {
    font-size: 1.5rem;
}

/* 廣告佔位符 */
.ad-placeholder, .google-auto-placed {
    display: block;
    margin: 1rem auto;
    text-align: center;
    background-color: #f3f4f6;
    border: none;
    border-radius: 0.5rem;
    color: #dc2626;
    font-size: 1.2rem;
    font-weight: bold;
    box-sizing: border-box;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
}
.google-auto-placed {
    margin: 0 auto;
}

.ad-placeholder.above-fold {
    width: 100% !important;
    max-width: 100% !important;
}

.ad-placeholder.in-content,
.ad-placeholder.sidebar-top {
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: 420px;
}


/* 頁腳 */
footer {
    background-color: #e0d1b9;
    color: #4a2c2a;
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 2rem;
    clear: both;
    transition: background-color 0.3s ease, color 0.3s ease;
}

footer ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

footer a {
    color: #4a2c2a;
    text-decoration: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #3b82f6;
}

footer a>i {
    margin-right: 0.5rem;
}

footer p {
    font-size: 0.9rem;
    margin-top: 1rem;
}

/* 滾動按鈕 */
.scroll-button {
    position: fixed;
    bottom: 40px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6b4e31, #4b3a25);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.scroll-button:hover {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    transform: scale(1.1);
}

.scroll-button i {
    font-size: 1.5rem;
}

.scroll-button.scroll-to-top i {
    transform: rotate(0deg);
}

.scroll-button.scroll-to-bottom i {
    transform: rotate(180deg);
}

.toTop_block,
.toBottom_block {
    background-position: center;
    background-repeat: no-repeat;
    bottom: 150px;
    cursor: pointer;
    display: none;
    height: 48px;
    overflow: hidden;
    position: fixed;
    right: 30px;
    text-decoration: none;
    width: 48px;
    z-index: 999;
}

.toBottom_block {
    bottom: 80px;
}

.toTop_block .fa-chevron-up,
.toBottom_block .fa-chevron-down {
    color: #a2afb9;
    font-size: 2.5rem;
}

.toTop_block.header_free,
.toBottom_block.header_free,
.toLeft.header_free,
.toRight.header_free {
    background-color: #4a5644;
}

.toTop_block.header_www,
.toBottom_block.header_www,
.toLeft.header_www,
.toRight.header_www {
    background-color: #2C3E50;
}

.open_on {
    display: block;
}

/* 主題切換按鈕 */
.theme-toggle {
    position: absolute;
    top: 10px;
    right: 30px;
    padding: 8px 14px;
    border: none;
    border-radius: 12px;
    background: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}

.theme-toggle:hover {
    /* background: rgba(13,71,161,0.9); */
}

.theme-toggle::first-letter {
    font-size: 0.8rem;
}

/* Modal 視窗 */
.modal {
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: none;
    opacity: 0;
    z-index: 1000;
    transition: opacity 0.2s ease-in-out;
}

.modal.show {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: #fff;
    color: #222;
    border-radius: 8px;
    padding: 20px;
    width: 70rem;
    max-width: 95%;
    max-height: 90%;
    overflow-y: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
}

.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.modal-content .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 1.5rem;
    color: #222;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

.modal-content .close-btn:hover {
    transform: scale(1.2);
    color: #f66;
}

/* 廣告攔截 Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

#adblockModal .admodal {
    background: #fff;
    color: #000;
    border-radius: 12px;
    padding: 20px;
    max-width: 460px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#adblockModal.show .admodal {
    transform: translateY(0);
    opacity: 1;
}

#adblockModal .admodal h2 {
    margin: 0;
    font-size: 20px;
}

#adblockModal .admodal p {
    margin: 15px 0;
    font-size: 16px;
}

#adblockModal .admodal button {
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}

/* Tooltip */
.custom-tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 2000;
}

.custom-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

/* 載入動畫 */
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 50px auto;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    display: none;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 其他樣式 */
.card h4 {
    color: #cc0000;
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    overflow: auto;
}

.tryout.filetype {
    background: #867f7a none repeat scroll 0 0;
    color: #ffffff;
}

.selected-option {
    color: darkred;
}

.close-btn {
    position: absolute;
    right: 12px;
    top: 8px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.category {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  margin-bottom: 25px;
  padding: 20px;
  transition: transform 0.2s;
}

.category:hover {
  transform: translateY(-3px);
}

.category h2 {
  font-size: 1.5rem;
  color: #34495e;
  margin-bottom: 15px;
  padding-bottom: 5px;
}
.category h2 a {
  font-size: 1.5rem;
}

.category ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 桌機：5 欄 */
  gap: 10px 20px; /* 行距 10px，列距 20px */
  list-style: none;
  padding: 0;
  margin: 0;
}

.category ul li {
  background: #ecf0f1;
  padding: 10px 15px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 1.15rem;
  transition: background 0.2s;
}

.category ul a {
	font-weight: 500;
}

.category ul li:hover {
  background: #d6eaf8;
}

.category ul li span {
  font-weight: bold;
  color: #2980b9;
}

.use_container {
    display: flex;
    flex-wrap: wrap;
    min-height: calc(100vh - 60px);
    margin: 10px auto 0;
    max-width: min(1500px, 100% - 2rem);
    width: 100%;
    padding: 0 1rem;
}

.use_logo {
    text-align: center;
    margin: 2rem 0 0;
}

.use_left {
    flex: 0 0 12%;
    background: var(--left-bg);
    padding: 15px;
    box-sizing: border-box;
}

.use_center {
    flex: 0 0 58%;
    background: var(--center-bg);
    padding: 15px;
    box-sizing: border-box;
}

.use_right {
    flex: 0 0 30%;
    background: var(--right-bg);
    padding: 15px;
    box-sizing: border-box;
}

.use_classify {
    background-color: #fff;
    border-radius: 0.75rem;
    padding: 1rem 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    /* width: 100% !important; */
    /* max-width: 100% !important; */
}

.use_classify h2 {
  font-size: 1.2rem;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--text-color);
}

.use_classify ul {
  list-style-type: none;  /* 移除圓點 */
  margin: 0;
  padding: 0;
}

.use_classify li {
  margin: 8px 0;
}

.use_classify a {
  display: block;
  padding: 6px 10px;
  text-decoration: none;
  color: var(--text-color);
  border-radius: 6px;
  transition: background 0.3s, padding-left 0.3s;
}

.use_classify a:hover {
  background: rgba(0,0,0,0.08);
  padding-left: 16px; /* hover 時稍微縮排，提升互動感 */
}

.use_block header, .use_block blockquote{
    padding: 1rem 0.5rem;
    margin: 0;
}

.use_block .use_title a {
	color: #fff;
	font-size: 1.25rem;
}
.use_block .footer-right {
    float: right;
    clear: right;
}

.use_detailed_button {
    padding: 0.2em 0.8em;
    background-color: #D20059;
    line-height: 2.2em;
    font-size: 1.3em;
    font-weight: 700;
    border-radius: 25px;
    margin-top: 0.5em;
    color: #fff;
}

.use_block.content {
    display: inline-block;
}

.top_block {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #edf0f3;
    display: flex;
    cursor: pointer;
	transition: transform 0.3s ease;
}

.top_block:hover {
    transform: translateY(-4px);
}

.f-left {
    float: left;
    text-align: left;
    margin-right: 0.5rem;
}

.f-right {
    float: right;
    text-align: right;
    margin-left: 0.5rem;
}
/* -------------------------- 暗色模式 ---------------------------------- */
body.dark-mode {
    background-color: #1f2937;
    color: #e5e7eb;
    transition: background-color 0.3s ease, color 0.3s ease;
    --bg-color: #181a1b;
    --text-color: #e5e5e5;
    --header-bg: #202324;
    --left-bg: #25282a;
    --center-bg: #1f2223;
    --right-bg: #2c2f31;
}

body.dark-mode .top_block {
    background: none;
}

body.dark-mode .category {
  background: #2c2c2c;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

body.dark-mode .category h2 {
  color: #ffffff;
  border-bottom-color: #3498db; /* 邊框可適度調整 */
}

body.dark-mode .category ul li {
  background: #3a3a3a;
  color: #e0e0e0;
}

body.dark-mode .category ul li:hover {
  background: #4a4a4a;
}

body.dark-mode .category ul li span {
  color: #3498db;
}

body.dark-mode.nav-open {
    overflow: hidden;
}

body.dark-mode a {
    /* color: #d1d5db; */
}

body.dark-mode header, body.dark-mode .bottom-nav {
    background: linear-gradient(135deg, #2d3748, #1f2937);
}

body.dark-mode .hamburger>i {
    color: #d1d5db;
}

body.dark-mode nav {
    background-color: #2d3748;
}

body.dark-mode nav a {
    color: #d1d5db;
}

body.dark-mode .dropdown-content {
    background-color: #374151;
    border-left-color: #4b5563;
}

body.dark-mode .dropdown-content a {
    color: #d1d5db;
}

body.dark-mode .dropdown-content a:hover {
    background-color: #4b5563;
}

body.dark-mode .nav-bottom-nav {
    background: linear-gradient(135deg, #2d3748, #1f2937);
}

body.dark-mode #search-input {
    background-color: #bbc6ce;
    border-color: #4b5563;
}

body.dark-mode .search-icon > i {
    color: #888;
}

body.dark-mode .main-content .card,
body.dark-mode .one-card-block .card,
body.dark-mode .sidebar .card,
body.dark-mode .right_sidebar .card {
    background-color: #374151;
}

body.dark-mode .main-content .card h3,
body.dark-mode .one-card-block .card h3,
body.dark-mode .right_sidebar .card h3,
body.dark-mode .sidebar .card h3 {
    color: #60a5fa;
}

body.dark-mode .main-content .card p,
body.dark-mode .one-card-block .card p,
body.dark-mode .sidebar .card p {
    color: #d1d5db;
}

body.dark-mode .two-card-block .card {
    background-color: #374151;
}

body.dark-mode .two-card-block .card h2 {
    color: #60a5fa;
}

body.dark-mode .two-card-block .card p {
    color: #d1d5db;
}

body.dark-mode .card_textline_block {
    background-color: #374151;
}

body.dark-mode .card_textline_block h2 {
    color: #60a5fa;
}

body.dark-mode .card_textline_block h3 {
    color: #60a5fa;
}

body.dark-mode .card_textline_block p {
    color: #d1d5db;
}

body.dark-mode .card_textline_block li a {
    color: #d1d5db;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    filter: brightness(1.3);
}

body.dark-mode .card_textline_block li a:hover {
    color: #60a5fa;
}

body.dark-mode .card-bottom {
    border-top-color: #4b5563;
}

body.dark-mode .card-bottom .left {
    color: #d1d5db;
}

body.dark-mode .card-bottom .right {
    color: #d1d5db;
}

body.dark-mode .freeware {
    background-color: #2f855a;
}

body.dark-mode .shareware {
    background-color: #e53e3e;
}

body.dark-mode .opensource {
    background-color: #4a5568;
}

body.dark-mode .MultiLanguage,
body.dark-mode .zh-TW,
body.dark-mode .zh-CN {
    background-color: #1e90ff;
}

body.dark-mode .ja-JP {
    background-color: #f28c38;
}

body.dark-mode .ko-KR {
    background-color: #63b3ed;
}

body.dark-mode .en-US {
    background-color: #f56565;
}

body.dark-mode .ad-placeholder {
    background-color: #4b5563;
    color: #f87171;
}

body.dark-mode footer {
    background-color: #2d3748;
    color: #d1d5db;
}

body.dark-mode footer a {
    color: #d1d5db;
}

body.dark-mode footer p {
    color: #d1d5db;
}

body.dark-mode .scroll-button {
    background: linear-gradient(135deg, #2d3748, #1f2937);
}

body.dark-mode .modal {
    background-color: rgba(20, 20, 20, 0.85);
}

body.dark-mode .modal-content {
    background-color: #222;
    color: #eee;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

body.dark-mode .modal-content .close-btn {
    color: #eee;
}

body.dark-mode .modal-content .close-btn:hover {
    color: #f66;
}

body.dark-mode #adblockModal .admodal {
    background-color: #1e1e1e;
    color: #f0f0f0;
}

body.dark-mode #adblockModal .admodal h2 {
    color: #f0f0f0;
}

body.dark-mode #adblockModal .admodal p {
    color: #ddd;
}

body.dark-mode #adblockModal .admodal button {
    background-color: #3b82f6;
    color: #fff;
}

body.dark-mode .custom-tooltip {
    background-color: #333;
    color: #fff;
}

body.dark-mode .pagination select, body.dark-mode .sys_class ul {
    background: #4b5563;
    color: #d1d5db;
}

body.dark-mode .sys_class .homepage_name,
body.dark-mode .subnav-content {
    background: #4b5563;
    color: #d1d5db;
}

body.dark-mode .Horizontal.software-card,
body.dark-mode .Inline.software-card {
    background: none;
}

body.dark-mode .Horizontal .highlight-text,
body.dark-mode .Inline .highlight-text {
    color: #edf0f3;
}

body.dark-mode .card h4 {
    color: #fff;
}
body.dark-mode .use_classify a:hover {
  background: rgba(255,255,255,0.08);
}
body.dark-mode .use_classify {
    background-color: #374151;
}

body.dark-mode .use_block .use_title a {
	color: #edf0f3;
}
/* ------------------ 媒體查詢 --------------------- */

/* 超大螢幕：3840px 以上 */
@media (min-width: 3840px) {
    .container, .use_container {
        max-width: 2400px;
    }
}

/* 大螢幕：2560px 以上 */
@media (min-width: 2560px) {
    .container, .use_container {
        max-width: 1800px;
    }
}

/* 桌面：1024px 以下 */
@media (max-width: 1024px) {
    header h1, .header-top h1  {
        font-size: 1.5rem;
    }
    
	nav ul {
    	gap: 0.4rem;
	}
    
    .container {
        max-width: 100%;
        padding: 0 1rem;
        grid-template-columns: 2fr 1fr;
        overflow: hidden;
    }

    .main-content,
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .os-menu {
        justify-content: right;
        width: 100%;
    }

    .os-menu i {
        font-size: 2rem;
    }

    .bottom-nav {
        padding: 0.5rem 0;
        gap: 1rem;
    }

    .bottom-nav a {
        font-size: 0.9rem;
    }
    
	.header-top .search-container {
		margin: 0;
	}
    .ad-placeholder.above-fold,
    .ad-placeholder.in-content,
    .ad-placeholder.sidebar-top {
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 50px;
    }

    .two-card-block {
        flex-direction: row;
        gap: 1.5rem;
        align-items: stretch;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .two-card-block .card {
        flex: 1 1 0;
        width: 50%;
        max-width: calc(50% - 0.75rem);
    }

    .two-card-block .card h2,
    .two-card-block .card h3,
    .two-card-block .card .software-icon,
    .two-card-block .card p,
    .two-card-block .card section,
    .two-card-block .card .card-bottom {
        flex: 0 0 auto;
    }

    .one-card-block .card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr auto;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .one-card-block .card h3 {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
        word-break: break-word;
    }

    .one-card-block .card .software-icon {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: 100% !important;
        aspect-ratio: 16 / 9;
    }

    .one-card-block .card section {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100% !important;
        max-width: 100% !important;
    }

    .one-card-block .card p {
        grid-column: 1 / -1;
        grid-row: 4;
        width: 100% !important;
        max-width: 100% !important;
        overflow: auto;
    }

    .one-card-block .card .card-bottom {
        grid-column: 1 / -1;
        grid-row: 5;
        overflow: hidden;
    }

    nav a {
        padding: 0.3rem 0.3rem;
    }

    .scroll-button {
        width: 40px;
        height: 40px;
        bottom: 30px;
        right: 15px;
    }

    .scroll-button i {
        font-size: 1.2rem;
    }

    .theme-toggle {
        right: 50px;
        width: 44px;
        height: 28px;
        top: 0;
        font-size: 0;
    }

    .theme-toggle i {
        font-size: 0.9rem;
    }

    .theme-toggle::first-letter {
        font-size: 0.8rem;
    }
    
    .header-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .web_Name {
        flex: 0 0 50%; /* 左半邊 */
    }

    .right-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 50%; /* 右半欄 */
    }

    .search-container {
        width: 100%;
        text-align: left;  /* 靠左 */
        display: block; 
    }

    .search-wrapper {
        width: 100%;       /* 撐滿右半欄 */
        max-width: none;   /* 移除桌面限制 */
        display: block;
    }
	.search-icon {
    	position: absolute;
		right: 0.5rem;
    	top: 50%;
    }
	.search-results {
    	top: 80% !important;
    }
    body.dark-mode .sys_class {
        background: none;
    }
}
@media (max-width: 1180px) and (min-width: 1025px) {
	.header-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .right-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 50%;
    }
    
	.search-container {
    	width: 80%;
	}
	
	.search-wrapper {
		height: 50px;
	}
	
	nav ul {
    	gap: 0.25rem;
	}
	
	.os-menu {
    	width: 100%;
    }
    
}
/* 介於1024px與769px之間 */
@media (max-width: 1024px) and (min-width: 769px) {
    .two-card-block {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .two-card-block .card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .use_left {
        flex: 0 0 25%;
    }

    .use_center {
        flex: 0 0 75%;
    }

    .use_right {
        flex: 0 0 100%;
    }
    
   .category ul {
        grid-template-columns: repeat(3, 1fr);
   }
    .header-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .web_Name {
        flex: 0 0 30%; /* 左半邊 */
    }

    .right-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 50%; /* 右半欄 */
    }
	.software-name {
    	font-size: 1.1rem !important;
	}
    .search-container {
        width: 100%;
        text-align: left;  /* 靠左 */
        display: block; 
    }

    .search-wrapper {
        width: 100%;       /* 撐滿右半欄 */
        max-width: 600px;   /* 移除桌面限制 */
        display: block;
    }
	.search-results {
    	top: 80% !important;
    }
}

/* 平板：992px 以下 */
@media (max-width: 992px) {
    .use_left {
        flex: 0 0 25%;
    }

    .use_center {
        flex: 0 0 75%;
    }

    .use_right {
        flex: 0 0 100%;
    }
}

/* 平板：768px 以下 */
@media (max-width: 768px) {
    body {
        padding: 2px;
    }
    .hamburger {
        display: flex;
    }

    header {
        padding: 1rem;
    }

    .header-top {
        align-items: center;
        margin-bottom: 0.5rem;
    }
    
	.search-wrapper {
        width: 92% !important;
    }
	input::placeholder {
    	font-size: 0.75rem !important;     /* 設定字型大小 */
	}
	
	.searchselect {
    	width: 100px !important;
		right: 32px !important;
		top: -37px !important;
	}

	.searchselect select {
    	font-size: 0.85rem !important;
	}
	
	.searchselect:before {
    	top: 9px !important;
    	right: 10px !important;
	}
	
    header h1 {
        margin-bottom: 0.5rem;
    }

    .os-menu {
        justify-content: right;
        width: 100%;
        margin: 0 0 0.5rem 0;
    }

    .bottom-nav {
        display: none;
    }

    .bottom-nav a {
        font-size: 0.85rem;
    }

    nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 300px;
        height: 100vh;
        transform: translateX(100%);
        z-index: 999;
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    .nav-open nav {
        transform: translateX(0);
    }

    nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem 1rem 0 1rem;
    }

    .dropdown>a {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        cursor: pointer;
        min-height: 44px;
    }

    .dropdown-content {
        position: static;
        box-shadow: none;
        background-color: #fff;
        border-left: 2px solid #d1d5db;
        border-radius: 0.5rem;
        min-width: 100%;
        max-height: 0;
        overflow: hidden;
    }

    .dropdown.open .dropdown-content {
        max-height: 500px;
    }

    .dropdown-content a {
        padding: 0.5rem 1rem 0.5rem 1.5rem;
        font-size: 0.9rem;
        min-height: 40px;
    }

    .search-container {
        max-width: 90%;
    }

    .container {
        max-width: 100%;
        padding: 0 1rem;
        grid-template-columns: 1fr;
        overflow: hidden;
    }

    .main-content,
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .main-content .card,
    .sidebar .card:not(.card_textline_block) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar .card:not(.card_textline_block) h2 {
        font-size: 1.5rem;
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .sidebar .card:not(.card_textline_block) h3 {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .sidebar .card:not(.card_textline_block) .software-icon {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
        max-width: 100% !important;
        aspect-ratio: 16 / 9;
    }

    .sidebar .card:not(.card_textline_block) p {
        grid-column: 1;
        grid-row: 4;
        align-self: start;
    }

    .sidebar .card:not(.card_textline_block) .card-bottom {
        grid-column: 1 / -1;
        grid-row: 5;
    }

    .two-card-block {
        flex-direction: row;
        gap: 1rem;
        align-items: stretch;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .two-card-block .card {
        flex: 1 1 0;
        width: 50%;
        max-width: calc(50% - 0.5rem);
    }

    .one-card-block .card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr auto;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .scroll-button {
        width: 40px;
        height: 40px;
        bottom: 30px;
        right: 15px;
    }

    .scroll-button i {
        font-size: 1.2rem;
    }

    .theme-toggle {
        right: 50px;
        width: 40px;
        height: 26px;
        top: 10px;
    }

    .theme-toggle i {
        font-size: 0.8rem;
    }
    .category ul {
      grid-template-columns: repeat(2, 1fr);
    }
}

/* 手機：600px 以下 */
@media (max-width: 600px) {
    .modal-content {
        max-width: 95%;
        max-height: 95%;
        padding: 15px;
    }

    .modal-content .close-btn {
        top: 8px;
        right: 8px;
        font-size: 1.25rem;
    }

    .custom-tooltip {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .use_left,
    .use_center,
    .use_right {
        flex: 0 0 100%;
    }
}

/* 手機：480px 以下 */
@media (max-width: 480px) {
    header {
        padding: 0.75rem;
    }

    header h1 {
        font-size: 1.5rem;
    }

    .os-menu {
        gap: 0.2rem;
    }

    .os-menu a {
        font-size: 0;
    }

    .hamburger {
        top: 0.75rem;
        right: 0.75rem;
    }

    nav {
        max-width: 280px;
        padding: 0.5rem;
    }

    .nav-bottom-nav a {
        padding: 0.4rem;
        font-size: 0.9rem;
    }

    .dropdown>a {
        padding: 0.6rem 0.75rem;
        font-size: 0.9rem;
    }

    .dropdown-content a {
        padding: 0.4rem 0.75rem 0.4rem 1.25rem;
        font-size: 0.85rem;
    }

    .main-content,
    .sidebar {
        padding: 0;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .main-content .card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        width: 100% !important;
        max-width: 100% !important;
    }

    .card .software-icon {
        width: 100%;
        max-width: 100% !important;
        aspect-ratio: 16 / 9;
    }

    .footer ul {
        flex-direction: column;
        gap: 1rem;
    }

    .footer {
        padding: 1.5rem 1rem;
    }

    .ad-placeholder {
        padding: 1rem;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 40px;
    }

    .two-card-block {
        flex-direction: column;
        gap: 1rem;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .two-card-block .card {
        flex: none;
        width: 100% !important;
        max-width: 100% !important;
    }

    .two-card-block .card h2 {
        font-size: 1.5rem;
    }

    .scroll-button {
        width: 36px;
        height: 36px;
        bottom: 25px;
        right: 10px;
    }

    .scroll-button i {
        font-size: 1rem;
    }

    .theme-toggle {
        right: 45px;
        width: 40px;
        height: 26px;
        top: 6px;
        font-size: 0;
        cursor: pointer;
        background: none;
        border: none;
    }

    .theme-toggle i {
        font-size: 0.8rem;
    }

    .theme-toggle::first-letter {
        font-size: 0.8rem;
    }

    .review_result .sys_icon {
        position: relative !important;
        display: inline-block;
        float: right;
    }
    
    .category ul {
      grid-template-columns: 1fr;
    }
    
    .right-col {
        width: 100%;
    }
    
 	.search-container {
        max-width: 100%;
	}
	
	.searchselect {
        width: 100px !important;
        right: 40px !important;
        top: -40px !important;
	}
	
	.searchselect select {
		font-size: 0.9rem !important;
	}
	
	input::placeholder {
    	font-size: 0.7rem;
	}
	
	#search-input {
		padding-left: 0.25rem;
	}
}
/* 手機：360px 以下 */
@media (max-width: 360px) {
    nav {
        max-width: 260px;
    }

    .nav-bottom-nav a {
        font-size: 0.85rem;
        padding: 0.3rem;
    }

    .dropdown>a {
        padding: 0.5rem 0.6rem;
        font-size: 0.85rem;
    }

    .dropdown-content a {
        padding: 0.35rem 0.6rem 0.35rem 1rem;
        font-size: 0.8rem;
    }

    .scroll-button {
        width: 32px;
        height: 32px;
        bottom: 20px;
        right: 8px;
    }

    .scroll-button i {
        font-size: 0.9rem;
    }

    .theme-toggle {
        right: 40px;
        width: 36px;
        height: 24px;
        top: 6px;
    }

    .theme-toggle i {
        font-size: 0.7rem;
    }
}