:root { 
    color-scheme: light dark; 
    --bg-color: #ffffff; --text-color: #000000; --border-color: #eee; --th-border: #000; --hint-color: #999; 
}
[data-theme="light"] { --bg-color: #ffffff; --text-color: #000000; --border-color: #eee; --th-border: #000; --hint-color: #999; }
[data-theme="dark"] { --bg-color: #121212; --text-color: #e0e0e0; --border-color: #333; --th-border: #e0e0e0; --hint-color: #777; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --bg-color: #121212; --text-color: #e0e0e0; --border-color: #333; --th-border: #e0e0e0; --hint-color: #777; }
}
body { 
    font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif; 
    background-color: var(--bg-color); color: var(--text-color); 
    margin: 0; padding: 0; transition: background-color 0.3s, color 0.3s; 
    padding-bottom: env(safe-area-inset-bottom); 
}
body > h1:not(.main-title), body > hr { display: none; }
.custom-header, .path-indicator, #list { width: 85%; max-width: 1200px; margin-left: auto; margin-right: auto; }
.custom-header { text-align: center; margin-top: 50px; margin-bottom: 20px; position: relative; }
.main-title { font-size: 32px; font-weight: bold; margin-bottom: 20px; }
.main-title a { color: var(--text-color); text-decoration: none; }
.search-box input { width: 100%; padding: 10px 15px; border: 2px solid var(--text-color); background: transparent; color: var(--text-color); font-size: 16px; box-sizing: border-box; outline: none; }
.search-hint { text-align: left; font-size: 12px; color: var(--hint-color); margin-top: 6px; padding-left: 2px; }
.path-indicator { font-size: 14px; font-weight: bold; margin-bottom: 10px; text-align: left; }
#list { table-layout: fixed; border-collapse: collapse; margin-bottom: 50px; width: 100%; }
#list th, #list td { text-align: left !important; padding: 12px 10px; vertical-align: middle; border-bottom: 1px solid var(--border-color); }
#list th { border-bottom: 2px solid var(--th-border); font-size: 14px; font-weight: bold; }
#list th a { display: inline-block; text-align: left !important; color: var(--text-color) !important; text-decoration: none !important; margin: 0; padding: 0; }
#list td { font-size: 14px; word-break: break-all; }
.icon-span { display: inline-block; width: 28px; text-align: left; }
#list a { color: var(--text-color); text-decoration: none; }
#list a:hover { text-decoration: underline; }

button.theme-toggle { position: fixed !important; top: 20px !important; right: 30px !important; cursor: pointer; font-size: 28px !important; background: transparent !important; border: none !important; outline: none !important; z-index: 100 !important; padding: 10px; transition: transform 0.2s ease; }
button.theme-toggle:hover { transform: scale(1.15); }

@media (max-width: 768px) {
    .custom-header { margin-top: 30px; }
    .main-title { font-size: 26px; }
    .custom-header, .path-indicator, #list { width: 95%; }
    #list th:nth-child(2), #list td:nth-child(2),
    #list th:nth-child(3), #list td:nth-child(3) { display: none !important; }
    #list th:nth-child(1), #list td:nth-child(1) { width: 100% !important; }
    button.theme-toggle { top: 10px !important; right: 10px !important; }
}
