*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a1a;color:#e0e0e0;font-family:system-ui,sans-serif;height:100vh;display:flex;flex-direction:column}

.header{background:rgba(15,15,30,0.95);border-bottom:1px solid rgba(255,80,40,0.4);padding:12px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;flex-shrink:0}
.logo{font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,#FFB47B,#FF5E3A);-webkit-background-clip:text;background-clip:text;color:transparent}
.header-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.user-widget{display:flex;align-items:center;gap:10px;background:rgba(255,80,40,0.1);padding:6px 14px;border-radius:30px;border:1px solid rgba(255,100,50,0.2)}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ff5e3a,#ff3a1f);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:#fff}
.user-avatar-img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.user-name{font-size:0.85rem;color:#ffaa66}
.btn{background:rgba(255,80,40,0.15);border:1px solid rgba(255,100,50,0.3);border-radius:20px;padding:6px 14px;color:#ffaa66;cursor:pointer;font-size:0.8rem;transition:.2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:rgba(255,80,40,0.3)}
.btn-primary{background:linear-gradient(90deg,#ff5e3a,#ff3a1f);border:none;color:#fff;padding:10px 24px;font-weight:600}
.btn-primary:hover{transform:scale(1.02);box-shadow:0 6px 20px rgba(255,60,30,0.4)}

.main{display:flex;flex:1;overflow:hidden;padding:16px;gap:16px;max-width:1400px;margin:0 auto;width:100%}
.left-col{width:320px;min-width:280px;display:flex;flex-direction:column;gap:16px;flex-shrink:0}

.upload-card{background:rgba(20,20,35,0.8);border-radius:20px;border:1px solid rgba(255,100,50,0.25);padding:28px 24px;text-align:center;flex-shrink:0}
.upload-card .icon-upload{font-size:48px;display:block;margin-bottom:12px}
.upload-card h3{color:#fff;font-size:18px;margin-bottom:6px}
.upload-card p{color:#888;font-size:13px;margin-bottom:18px}
.upload-card .drop-zone{border:2px dashed rgba(255,100,50,0.3);border-radius:16px;padding:30px 20px;transition:.3s;cursor:pointer}
.upload-card .drop-zone:hover{border-color:#ff5e3a;background:rgba(255,80,40,0.05)}
.upload-card .drop-zone.dragover{border-color:#ff5e3a;background:rgba(255,80,40,0.1)}
.upload-card .drop-zone .hint{color:#666;font-size:13px;margin-top:8px}

.progress-container{display:none;margin-top:14px;background:#2a2a3a;border-radius:20px;overflow:hidden}
.progress-bar{width:0%;height:24px;background:linear-gradient(90deg,#ff5e3a,#ff3a1f);transition:width .3s;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff;font-weight:500}
.upload-status{font-size:13px;color:#888;margin-top:8px;min-height:20px}
.file-queue{margin-top:12px;text-align:left;max-height:120px;overflow-y:auto}
.file-queue .q-item{display:flex;justify-content:space-between;font-size:12px;color:#aaa;padding:3px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.file-queue .q-item .q-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-queue .q-item .q-size{color:#666;font-size:11px}

.storage-card{background:rgba(20,20,35,0.6);border-radius:16px;border:1px solid rgba(255,100,50,0.15);padding:16px 20px}
.storage-card .storage-label{display:flex;justify-content:space-between;font-size:13px;color:#888;margin-bottom:6px}
.storage-card .storage-bar{height:6px;background:#2a2a3a;border-radius:10px;overflow:hidden}
.storage-card .storage-fill{height:100%;background:linear-gradient(90deg,#ff5e3a,#ff3a1f);border-radius:10px;transition:width .5s}

.right-col{flex:1;display:flex;flex-direction:column;min-width:0;background:rgba(20,20,35,0.4);border-radius:20px;border:1px solid rgba(255,100,50,0.1);padding:16px 20px;overflow:hidden}
.right-col .files-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-shrink:0}
.right-col .files-header h2{font-size:18px;font-weight:600;color:#fff}
.right-col .files-header .count{color:#666;font-size:13px;font-weight:400}
.files-list{flex:1;overflow-y:auto;padding-right:4px}
.files-list::-webkit-scrollbar{width:4px}
.files-list::-webkit-scrollbar-track{background:transparent}
.files-list::-webkit-scrollbar-thumb{background:rgba(255,100,50,0.3);border-radius:10px}

.file-item{background:rgba(20,20,35,0.6);border-radius:14px;border:1px solid rgba(255,100,50,0.15);padding:14px 18px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;transition:.2s}
.file-item:hover{border-color:rgba(255,100,50,0.4);background:rgba(30,30,50,0.6)}
.file-info{flex:1;min-width:120px;cursor:pointer}
.file-name{color:#ffaa66;font-weight:500;display:flex;align-items:center;gap:8px;word-break:break-word;font-size:14px}
.file-meta{font-size:0.7rem;color:#666;margin-top:3px}
.file-actions{display:flex;gap:4px;flex-wrap:wrap;pointer-events:auto}
.file-actions .btn-sm{background:rgba(255,80,40,0.12);border:1px solid rgba(255,100,50,0.2);border-radius:20px;padding:5px 12px;color:#ffaa66;cursor:pointer;font-size:0.7rem;transition:.2s;display:inline-flex;align-items:center;gap:4px}
.file-actions .btn-sm:hover{background:rgba(255,80,40,0.25)}
.file-actions .btn-sm.danger:hover{background:rgba(255,50,50,0.2);border-color:#ff4444;color:#ff6666}
.file-actions .btn-sm.share{background:rgba(0,200,100,0.1);border-color:rgba(0,200,100,0.2);color:#66dd88}
.file-actions .btn-sm.share:hover{background:rgba(0,200,100,0.2)}
.file-actions .btn-sm.view{background:rgba(100,150,255,0.1);border-color:rgba(100,150,255,0.2);color:#88bbff}
.file-actions .btn-sm.view:hover{background:rgba(100,150,255,0.2)}

.empty-state{text-align:center;padding:60px 20px;color:#666}
.empty-state .icon{font-size:3.5rem;margin-bottom:12px;opacity:0.4}
.empty-state h3{color:#888;margin-bottom:4px;font-weight:500}
.empty-state p{font-size:14px}

.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#1a1a2e;padding:12px 28px;border-radius:12px;border:1px solid rgba(0,200,100,0.3);color:#66dd88;font-size:0.9rem;z-index:999;display:none;box-shadow:0 8px 30px rgba(0,0,0,0.6)}

.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92);z-index:1000;justify-content:center;align-items:center}
.modal.active{display:flex}
.modal-content{max-width:92%;max-height:92%;background:#1a1a2e;border-radius:16px;padding:20px;position:relative;border:1px solid rgba(255,100,50,0.15);overflow:hidden}
.modal-close{position:absolute;top:10px;right:16px;font-size:26px;color:#fff;cursor:pointer;background:none;border:none;transition:.2s;z-index:10}
.modal-close:hover{color:#ff5e3a;transform:rotate(90deg)}
.modal-preview{display:flex;justify-content:center;align-items:center;min-height:200px;max-height:80vh;overflow:auto}
.modal-preview img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:8px}
.modal-preview video{max-width:100%;max-height:70vh;border-radius:8px}
.modal-preview audio{width:100%;max-width:600px}
.modal-preview iframe{width:100%;height:70vh;border:none;border-radius:8px;background:#fff}
.modal-preview .text-content{background:#0a0a1a;padding:20px;border-radius:8px;max-width:800px;width:100%;max-height:70vh;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:monospace;font-size:14px;color:#e0e0e0}
.modal-preview .placeholder{color:#666;font-size:18px;text-align:center;padding:40px}
.modal-title{color:#ffaa66;font-size:14px;margin-bottom:12px;text-align:center;word-break:break-word}

@media(max-width:820px){
  .main{flex-direction:column;padding:12px;overflow-y:auto;height:100%}
  .left-col{width:100%;min-width:unset}
  .right-col{min-height:300px}
}
@media(max-width:600px){
  .header{padding:10px 16px}
  .file-item{flex-direction:column;align-items:stretch}
  .file-actions{justify-content:flex-end}
  .modal-content{width:95%;padding:12px}
  .modal-preview{min-height:100px}
  .modal-preview img,.modal-preview video{max-height:50vh}
  .modal-preview iframe{height:50vh}
}

/* Новый виджет места в шапке */
.quota-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255,80,40,0.1);
  padding: 6px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,100,50,0.2);
  min-width: 130px;
  gap: 4px;
}
.quota-widget span {
  font-size: 0.75rem;
  color: #ffaa66;
  text-align: center;
  font-weight: 500;
}
.quota-bar {
  height: 4px;
  background: #2a2a3a;
  border-radius: 4px;
  overflow: hidden;
}
.quota-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff5e3a, #ff3a1f);
  border-radius: 4px;
  transition: width 0.3s;
}