#studioImgPreview span:hover { color: #ef4444; }
.mode-switcher { display: flex; gap: 5px; background: #e2e8f0; padding: 4px; border-radius: 8px; }
.mode-switcher button { border: none; padding: 6px 15px; border-radius: 6px; cursor: pointer; font-weight: 800; font-size: 11px; transition: 0.3s; color: #64748b; }
.mode-switcher button.active { background: #fff; color: #4285F4; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

.google-login-btn { background:#4285F4; color:white; padding:14px 30px; border:none; border-radius:50px; font-weight:800; cursor:pointer; font-size:15px; transition:0.3s; box-shadow: 0 10px 20px rgba(66, 133, 244, 0.2); }
.cloud-user-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; background: #f1f5f9; padding: 10px 15px; border-radius: 12px; border: 1px solid #e2e8f0; }
.st-logout-btn { background:#ef4444; color:white; border:none; padding:5px 12px; border-radius:6px; cursor:pointer; font-weight:700; font-size: 11px; }

.studio-form-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: #fff; border: 1px solid #e2e8f0; padding: 15px; border-radius: 20px; margin-bottom: 25px; }

.drag-area { border: 2px dashed #cbd5e1; height: 230px; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; transition: 0.3s; position: relative; overflow: hidden; background: #f8fafc; }
.drag-area.active { border: 2px solid #4285F4; background: #eff6ff; }
.drag-area .icon { font-size: 40px; color: #4285F4; }
.drag-area header { font-size: 16px; font-weight: 800; color: #1e293b; margin-top: 8px; }
.drag-area button { padding: 7px 18px; font-size: 13px; font-weight: 700; border: none; background: #fff; color: #4285F4; border-radius: 5px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-top: 5px; }

.form-inputs { display: flex; flex-direction: column; gap: 12px; }
.st-input-group label { display: block; font-size: 10px; font-weight: 800; color: #4285F4; text-transform: uppercase; margin-bottom: 4px; }
.st-input-group input { width: 100%; padding: 11px; border: 1px solid #cbd5e1; border-radius: 10px; outline: none; font-size: 14px; font-weight: 600; background: #fff; }
.st-save-btn { background: #059669; color: white; padding: 14px; border: none; border-radius: 12px; font-weight: 800; font-size: 15px; cursor: pointer; transition: 0.3s; margin-top: 5px; }

.records-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-bottom: 2px solid #4285F4; padding-bottom: 10px; }
.search-box { position: relative; flex: 1; min-width: 250px; }
.search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 13px; }
.search-box input { width: 100%; padding: 9px 10px 9px 35px; border: 1px solid #cbd5e1; border-radius: 50px; outline: none; font-size: 13px; background: #fff; }

.cloud-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 15px; margin-top: 20px; max-height: 480px; overflow-y: auto; padding: 10px; background: #f1f5f9; border-radius: 15px; }

.st-card { background: white; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; transition: 0.3s; display: flex; flex-direction: column; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.st-card:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.08); }

/* --- Fixed Icon Centering Here --- */
.st-card-img-box { position: relative; height: 150px; background: #eee; display: flex; align-items: center; justify-content: center; }

.st-card-img-box img { width: 100%; height: 100%; object-fit: cover; }
.st-card-info { padding: 10px; flex: 1; text-align: left; }
.st-card-info b { font-size: 14px; color: #1e293b; display: block; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-card-info p { font-size: 11px; color: #64748b; margin: 2px 0; font-weight: 600; }
.st-card-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #f1f5f9; }
.st-btn-action { padding: 9px; border: none; cursor: pointer; font-size: 11px; font-weight: 800; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 4px; }
.btn-dl { background: #f0fdf4; color: #16a34a; }
.btn-del { background: #fef2f2; color: #dc2626; border-left: 1px solid #f1f5f9; }

@media (max-width: 768px) {
    .studio-form-container { grid-template-columns: 1fr; gap: 15px; padding: 12px; }
    .drag-area { height: 180px; }
    .cloud-gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px; }
    .st-card-img-box { height: 110px; }
    .search-box { min-width: 100%; }
}
@media (max-width: 400px) { .cloud-gallery-grid { grid-template-columns: 1fr; } .st-card-img-box { height: 160px; } }