:root {

        --bg-color: #fff3e6;

        --item-hover: #ffe0c2;

        --item-active: #ffd1a3;

        --border-color: #ffb366;

        --text-color: #4d2b00;

        --text-secondary: #995c33;

        --header-gradient-start: #fff7f0;

        --header-gradient-end: #ffe6cc;

        --breadcrumb-bg: #ffe6cc;

        --link-color: #ff7b00;

        --link-hover: #cc6300;

        --container-bg: #ffffff;

        --shadow-color: rgba(102, 51, 0, 0.1);

    }

    

    body {

        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        background-color: var(--bg-color);

        color: var(--text-color);

        margin: 0;

        padding: 20px;

        line-height: 1.6;

    }

    

    .container {

        max-width: 1000px;

        margin: 0 auto;

        background: var(--container-bg);

        border-radius: 8px;

        box-shadow: 0 2px 10px var(--shadow-color);

        overflow: hidden;

    }

    

    .header {

        padding: 15px 20px;

        background: linear-gradient(to bottom, var(--header-gradient-start), var(--header-gradient-end));

        border-bottom: 1px solid var(--border-color);

        display: flex;

        align-items: center;

    }

    

    .header h1 {

        margin: 0;

        font-size: 18px;

        font-weight: normal;

        color: var(--text-color);

    }

    

    .breadcrumb {

        display: flex;

        align-items: center;

        padding: 10px 20px;

        background: var(--breadcrumb-bg);

        border-bottom: 1px solid var(--border-color);

        flex-wrap: wrap;

    }

    

    .breadcrumb a {

        color: var(--link-color);

        text-decoration: none;

        margin: 0 5px;

        transition: color 0.2s;

    }

    

    .breadcrumb a:hover {

        color: var(--link-hover);

        text-decoration: underline;

    }

    

    .breadcrumb-separator {

        color: var(--text-secondary);

    }

    

    .file-list {

        list-style: none;

        padding: 0;

        margin: 0;

    }

    

    .file-item {

        display: flex;

        align-items: center;

        padding: 10px 20px;

        border-bottom: 1px solid var(--border-color);

        transition: background-color 0.2s ease, transform 0.1s ease;

        cursor: pointer;

    }

    

    .file-item:hover {

        background-color: var(--item-hover);

    }

    

    .file-item:active {

        background-color: var(--item-active);

        transform: scale(0.99);

    }

    

    .file-icon {

        width: 24px;

        height: 24px;

        margin-right: 15px;

        flex-shrink: 0;

        color: #ff7b00;

    }

    

    .file-name {

        flex-grow: 1;

        min-width: 0;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }

    

    .file-size {

        width: 100px;

        text-align: right;

        color: var(--text-secondary);

        margin: 0 15px;

        flex-shrink: 0;

    }

    

    .file-modified {

        width: 150px;

        text-align: right;

        color: var(--text-secondary);

        flex-shrink: 0;

    }

    

    .empty-folder {

        padding: 30px;

        text-align: center;

        color: var(--text-secondary);

    }

    

    .icon-folder,

    .icon-image,

    .icon-document,

    .icon-spreadsheet,

    .icon-pdf,

    .icon-text,

    .icon-archive,

    .icon-file,

    .icon-exe,

    .icon-apk,

    .icon-dll,

    .icon-sh,

    .icon-yaml,

    .icon-ipa,

    .icon-apkx,

    .icon-apkm,

    .icon-cmd,

    .icon-py {

        color: #ff7b00;

    }

    

    @keyframes fadeIn {

        from { opacity: 0; transform: translateY(5px); }

        to { opacity: 1; transform: translateY(0); }

    }

    

    .file-item {

        animation: fadeIn 0.3s ease forwards;

        opacity: 0;

    }

    

    @media (max-width: 768px) {

        .file-size, .file-modified {

            display: none;

        }

        

        .breadcrumb {

            font-size: 14px;

        }

    }



    /* 页脚样式 */

    .footer {

        text-align: center;

        margin-top: 30px;

        padding: 20px;

        background-color: var(--breadcrumb-bg);

        border-top: 1px solid var(--border-color);

        color: var(--text-secondary);

        font-size: 14px;

    }

    .footer p {

        margin: 5px 0;

    }