.navbar{position:fixed;top:0;left:0;width:100%;background-color:#333;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:15px 20px;z-index:1000;box-shadow:0 4px 6px #0003;transition:background-color .3s ease}.dark-mode .navbar{background-color:#1a1a1a;box-shadow:0 4px 6px #00000080}.navbar a{color:#fff;text-decoration:none;margin-right:15px;font-size:16px}.navbar a:last-child{margin-right:0}.navbar a:hover{color:#ccc}.dark-mode-toggle{background:none;border:2px solid #ffffff;border-radius:50%;width:40px;height:40px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;color:#fff}.dark-mode-toggle:hover{background-color:#ffffff1a;transform:scale(1.1)}.dark-mode .dark-mode-toggle{border-color:#fff}@media (max-width: 768px){.navbar{flex-direction:column;align-items:flex-start;padding:6vw 5vw}.navbar a{margin-right:0;margin-bottom:4vw;font-size:5vw}.navbar a:last-child{margin-bottom:0}}.file-browser{margin-top:20px}.file-controls{margin-bottom:20px;padding:18px;background-color:#fff;border-radius:8px;box-shadow:0 2px 6px #00000014;border:1px solid #e0e0e0;transition:background-color .3s ease,border-color .3s ease}.dark-mode .file-controls{background-color:#3a3a3a;border-color:#555}.search-container{display:flex;gap:10px;margin-bottom:12px;align-items:stretch}.search-input{flex:1;padding:12px 16px;border:2px solid #d0d0d0;border-radius:6px;font-size:15px;font-family:Arial,sans-serif;background-color:#fafafa;color:#333;transition:all .2s ease}.dark-mode .search-input{background-color:#2d2d2d;border-color:#555;color:#e0e0e0}.dark-mode .search-input::placeholder{color:#888}.search-input:focus{outline:none;border-color:#06c;background-color:#fff;box-shadow:0 0 0 3px #0066cc1a}.search-input::placeholder{color:#999}.clear-search-btn{padding:12px 24px;background-color:#555;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;white-space:nowrap}.clear-search-btn:hover{background-color:#333;transform:translateY(-1px);box-shadow:0 2px 4px #0003}.clear-search-btn:active{transform:translateY(0)}.file-info{color:#666;font-size:14px;padding:4px 0;font-weight:500;transition:color .3s ease}.dark-mode .file-info{color:#aaa}.table-container{overflow-x:auto;margin-bottom:20px;border-radius:8px;box-shadow:0 2px 6px #00000014;border:1px solid #e0e0e0;background-color:#fff;transition:background-color .3s ease,border-color .3s ease}.dark-mode .table-container{background-color:#3a3a3a;border-color:#555}.directory-listing{width:100%;border-collapse:collapse}.directory-listing th,.directory-listing td{border:1px solid #ddd;padding:8px;text-align:left;transition:background-color .3s ease,color .3s ease,border-color .3s ease}.dark-mode .directory-listing th,.dark-mode .directory-listing td{border-color:#555;color:#e0e0e0}.directory-listing th{background-color:#f2f2f2}.dark-mode .directory-listing th{background-color:#4a4a4a}.directory-listing tr:nth-child(2n){background-color:#f9f9f9}.dark-mode .directory-listing tr:nth-child(2n){background-color:#333}.directory-listing tr{transition:background-color .2s ease}.directory-listing tr:hover{background-color:#f0f0f0}.dark-mode .directory-listing tr:hover{background-color:#444}.directory-listing a{text-decoration:none;color:#06c;transition:color .3s ease}.dark-mode .directory-listing a{color:#4da6ff}.directory-listing a:hover{text-decoration:underline}.last-modified{white-space:nowrap}.pagination-container{margin-top:25px;padding:20px 0;display:flex;justify-content:center;background-color:#fff;border-radius:8px;box-shadow:0 2px 6px #00000014;border:1px solid #e0e0e0;transition:background-color .3s ease,border-color .3s ease}.dark-mode .pagination-container{background-color:#3a3a3a;border-color:#555}.pagination{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;padding:0 10px}.pagination-btn{min-width:40px;height:40px;padding:0 14px;background-color:#fff;color:#333;text-decoration:none;border:2px solid #d0d0d0;border-radius:6px;font-size:14px;font-weight:500;transition:all .2s ease;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1}.dark-mode .pagination-btn{background-color:#2d2d2d;color:#e0e0e0;border-color:#555}.pagination-btn:hover:not(.disabled):not(.active){background-color:#f5f5f5;border-color:#999;transform:translateY(-2px);box-shadow:0 2px 4px #0000001a}.dark-mode .pagination-btn:hover:not(.disabled):not(.active){background-color:#444;border-color:#777}.pagination-btn.active{background-color:#333;color:#fff;border-color:#333;font-weight:600;box-shadow:0 2px 6px #00000026}.dark-mode .pagination-btn.active{background-color:#06c;border-color:#06c}.pagination-btn.disabled{background-color:#fafafa;color:#bbb;border-color:#e5e5e5;cursor:not-allowed;opacity:.7}.pagination-ellipsis{padding:0 8px;color:#666;font-weight:700;line-height:40px}@media (max-width: 768px){.file-controls{padding:4vw}.search-container{flex-direction:column;align-items:stretch;gap:8px}.search-input{font-size:16px;padding:12px}.clear-search-btn{font-size:15px;padding:12px;width:100%}.file-info{font-size:14px;text-align:center;padding-top:8px}.pagination{gap:4px;padding:0 5px}.pagination-btn{min-width:36px;height:36px;padding:0 10px;font-size:13px}.pagination-ellipsis{padding:0 4px;line-height:36px;font-size:13px}.table-container{overflow-x:scroll;-webkit-overflow-scrolling:touch}}.api-data-container{margin-top:20px;padding:18px;background-color:#fff;border-radius:8px;box-shadow:0 2px 6px #00000014;border:1px solid #e0e0e0;transition:background-color .3s ease,border-color .3s ease}.dark-mode .api-data-container{background-color:#3a3a3a;border-color:#555}.api-data-container h3{color:#333;margin-bottom:15px;transition:color .3s ease}.dark-mode .api-data-container h3{color:#e0e0e0}.api-data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.api-data-item{background-color:#fafafa;padding:12px;border-radius:6px;box-shadow:0 1px 3px #0000000f;border:1px solid #e5e5e5;transition:all .2s ease}.dark-mode .api-data-item{background-color:#2d2d2d;border-color:#555}.api-data-item:hover{box-shadow:0 2px 6px #0000001a;transform:translateY(-1px)}.dark-mode .api-data-item:hover{box-shadow:0 2px 6px #0000004d}.api-data-item strong{display:block;margin-bottom:6px;color:#555;font-size:13px;transition:color .3s ease}.dark-mode .api-data-item strong{color:#aaa}.status-good{color:green;font-weight:700}.status-bad{color:red;font-weight:700}@media (max-width: 768px){.api-data-grid{grid-template-columns:1fr}}.app{min-height:100vh}.container{position:relative;max-width:1000px;width:95%;padding:20px;background-color:#e0e0e0;border-radius:10px;box-shadow:0 4px 8px #0003;margin:80px auto 20px;overflow-wrap:break-word;transition:background-color .3s ease,color .3s ease}.dark-mode .container{background-color:#2d2d2d;box-shadow:0 4px 8px #00000080}.container h1{color:#333;margin-bottom:20px;transition:color .3s ease}.dark-mode .container h1{color:#e0e0e0}.container p{color:#333;margin-bottom:10px;transition:color .3s ease}.dark-mode .container p{color:#ccc}.top-right-gif{display:block;margin:20px auto 0;width:300px;height:auto}.loading,.error{text-align:center;padding:40px;color:#333;font-size:18px;transition:color .3s ease}.dark-mode .loading{color:#e0e0e0}.error{color:#c00}.dark-mode .error{color:#f44}@media (max-width: 768px){.container{padding:5vw;margin:calc(25vw + 20px) auto 20px}.container h1{font-size:6vw}.container p{font-size:4vw}.top-right-gif{width:70vw}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background-color:#222;margin:0;color:#333;transition:background-color .3s ease,color .3s ease}body.dark-mode{background-color:#1a1a1a;color:#e0e0e0}#root{min-height:100vh}