#drop-zone{border:2px dashed var(--gray-400);border-radius:var(--border-radius);padding:2rem;text-align:center;background-color:var(--gray-100);cursor:pointer;transition:var(--transition);margin-bottom:var(--spacing-lg)}#drop-zone.dragover{background-color:var(--gray-200);border-color:var(--primary)}#drop-zone p{color:var(--text-muted);margin:var(--spacing-xs) 0}#file-drop-area{margin-bottom:var(--spacing-lg)}#content-columns-wrapper{display:flex;gap:var(--spacing-lg);align-items:flex-start;margin-bottom:var(--spacing-lg)}#zip-contents-area{background-color:var(--card-bg);padding:var(--spacing-lg);border-radius:var(--border-radius);box-shadow:var(--box-shadow);border:1px solid var(--border-color);flex:1;min-width:300px;overflow-x:auto}#zip-contents-area h2{margin-top:0;color:var(--text-color);border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-sm);font-size:1.2rem}#file-tree ul{list-style-type:none;margin:0;padding:0;position:relative}#file-tree ul ul{padding-left:20px}#file-tree li{margin:0;padding:2px 0 2px 25px;line-height:1.6;position:relative}#file-tree li:before,#file-tree li:after{content:"";position:absolute;left:10px;border-color:var(--gray-400);border-style:solid;border-width:0}#file-tree li:before{top:.8em;width:10px;border-top-width:1px}#file-tree li:not(:last-child):after{top:0;bottom:0;border-left-width:1px}#file-tree li:last-child:after{top:0;height:.8em;border-left-width:1px}#file-tree .folder>span,#file-tree .file>span{cursor:default;display:inline-block;vertical-align:middle;color:var(--text-color)}#file-tree .folder>span{cursor:pointer;font-weight:500}#file-tree .folder>span:hover{text-decoration:underline;color:var(--primary)}#file-tree .folder>span:before{content:"\f07b";font-family:"Font Awesome 6 Free";font-weight:900;margin-right:6px;color:var(--warning);vertical-align:middle}#file-tree .folder.expanded>span:before{content:"\f07c"}#file-tree .file>span:before{content:"\f15b";font-family:"Font Awesome 6 Free";font-weight:400;margin-right:6px;color:var(--text-muted);vertical-align:middle}#file-tree .folder.collapsed>ul{display:none}#file-tree .file-actions{display:inline-block;margin-left:var(--spacing-sm);vertical-align:middle}#file-tree .file-actions button{padding:3px 10px;font-size:.8em;cursor:pointer;background-color:var(--primary);color:#fff;border:none;border-radius:var(--border-radius-sm);margin-left:5px;transition:var(--transition)}#file-tree .file-actions button:first-child{margin-left:0}#file-tree .file-actions button:hover{background-color:var(--primary-dark)}#file-tree .file-actions .view-btn{background-color:var(--success)}#file-tree .file-actions .view-btn:hover{background-color:#05b386}#file-view-area{background-color:var(--card-bg);padding:var(--spacing-lg);border-radius:var(--border-radius);box-shadow:var(--box-shadow);border:1px solid var(--border-color);flex:1;min-width:300px}#file-view-area h3{margin-top:0;color:var(--text-color);font-size:1.1rem}#file-content-display{background-color:var(--gray-100);border:1px solid var(--border-color);padding:var(--spacing-md);max-height:400px;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word;font-family:Courier New,Courier,monospace;font-size:.9rem;color:var(--text-color);border-radius:var(--border-radius-sm)}#close-view-btn{margin-top:var(--spacing-sm);padding:8px 15px;background-color:var(--gray-500);color:#fff;border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:var(--transition)}#close-view-btn:hover{background-color:var(--gray-600)}body.dark-theme #drop-zone{background-color:var(--gray-100);border-color:var(--gray-400)}body.dark-theme #drop-zone.dragover{background-color:var(--gray-200);border-color:var(--primary)}body.dark-theme #drop-zone p{color:var(--text-muted)}body.dark-theme #zip-contents-area,body.dark-theme #file-view-area{background-color:var(--card-bg);border-color:var(--border-color)}body.dark-theme #file-content-display{background-color:var(--gray-100);border-color:var(--border-color);color:var(--text-color)}body.dark-theme #close-view-btn{background-color:var(--gray-500)}body.dark-theme #close-view-btn:hover{background-color:var(--gray-600)}@media (max-width: 900px){#content-columns-wrapper{flex-direction:column}#zip-contents-area,#file-view-area{width:100%;min-width:unset;margin-bottom:var(--spacing-lg)}#content-columns-wrapper>section:last-child{margin-bottom:0}}@media (max-width: 768px){#file-tree .file-actions{display:block;margin-left:0;margin-top:5px}#file-tree .file-actions button{margin-left:0;margin-right:5px;margin-bottom:5px}}