:root {--bg-color: #f8f9fa;--text-color: #212529;--link-color: #0d6efd;--hover-color: #0a58ca;--border-color: #dee2e6;--folder-color: #ffc107;--file-color: #6c757d;}
* {margin: 0;padding: 0;box-sizing: border-box;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
body {background-color: var(--bg-color);color: var(--text-color);line-height: 1.5;max-width: 1200px;margin: 0 auto;padding: 20px;}
header {margin-bottom: 5px;padding-bottom: 8px;}
h1 {font-size: 1.8rem;font-weight: 500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.breadcrumb-container {background: white;border: 1px solid var(--border-color);border-radius: 8px;padding: 8px 12px;margin-top: 5px;margin-bottom: 8px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);display: flex;align-items: center;gap: 12px;}
.breadcrumb {display: flex;flex-wrap: wrap;list-style: none;font-size: 0.9rem;margin: 0;flex: 1;}
.breadcrumb-item {display: flex;align-items: center;}
.breadcrumb-item:not(:first-child)::before {content: "/";padding: 0 8px;color: var(--file-color);}
.breadcrumb-item a, .breadcrumb-item span {color: var(--link-color);text-decoration: none;}
.breadcrumb-item a:hover {color: var(--hover-color);text-decoration: underline;}
.breadcrumb-item:last-child span {color: var(--text-color);}
.breadcrumb-popup-button {padding: 4px 8px;background-color: #0d6efd;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 0.8rem;transition: background-color 0.3s ease;white-space: nowrap;}
.breadcrumb-popup-button:hover {background-color: #0a58ca;}

.split-links {background: white;border: 1px solid var(--border-color);border-radius: 8px;margin-top: 15px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);display: flex;overflow: hidden;}
.split-link {flex: 1;padding: 5.5px;text-align: center;color: black;text-decoration: none;transition: background-color 0.2s ease;border-right: 1px solid var(--border-color);}
.split-link:last-child {border-right: none;}
.split-link:hover {background-color: rgba(13, 110, 253, 0.1);color: var(--hover-color);}

.directory-list {list-style: none;border: 1px solid var(--border-color);border-radius: 5px;background-color: white;overflow: hidden;}
.directory-item {border-bottom: 1px solid var(--border-color);transition: background-color 0.2s;}
.directory-item:last-child {border-bottom: none;}
.directory-item:hover {background-color: rgba(0, 0, 0, 0.02);}
.directory-link {display: flex;align-items: center;padding: 6px 15px;color: var(--text-color);text-decoration: none;}
.directory-icon {margin-right: 10px;font-size: 1.2rem;}
.folder-icon {color: var(--folder-color);}
.file-icon {color: var(--file-color);}
.directory-name {flex-grow: 1;}
.directory-meta {color: var(--file-color);font-size: 0.85rem;margin-left: 10px;display: none;}
.empty-message {padding: 30px;text-align: center;color: var(--file-color);} 

.popup-button {padding: 5px 10px; background-color: #0d6efd; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 0.9rem; transition: background-color 0.3s ease; }
.popup-button:hover {background-color: #0a58ca; }
.popup-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; }
.popup-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 10px; max-width: 600px; width: 90%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.popup-content h2 {margin-top: 0; }
.popup-close {background: #f44336; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 1rem; margin-top: 10px; }
.popup-close:hover {background: #d32f2f; }

.file-item {display: flex; align-items: center; justify-content: space-between; }
.file-link {flex: 1; }
.like-button {background: transparent; border: none; color: #333; cursor: pointer; font-size: 20px; padding: 6px 15px; margin-left: 10px; transition: transform 0.2s ease; flex-shrink: 0; }
.like-button:hover {transform: scale(1.1); }
.like-button:active {transform: scale(0.95); }
.directory-item:hover .like-button { background: transparent; }        
@media (max-width: 768px) {
    body {padding: 15px;}
    h1 {font-size: 1.6rem;white-space: normal;overflow: visible;text-overflow: unset;max-width: 100%;line-height: 1.3;}
    .mobile-break::after {content: "\A";white-space: pre;}
    .breadcrumb-container {gap: 10px;padding: 8px 12px;}
    .breadcrumb-popup-button {padding: 4px 8px;font-size: 0.8rem;}
    .breadcrumb {font-size: 0.85rem;}
    .popup-content {width: 95%;max-width: none;left: 50%;margin: 0;padding: 15px;}
    .popup-content h2 {font-size: 1.2rem;}
    .popup-close {width: 100%;padding: 10px;margin-top: 15px;}
    .like-button {font-size: 18px; padding: 4px 10px;}
    .split-link {padding: 8px 8px;font-size: 0.9rem;}
}